0

Учу реакт и столкнулся с проблемой роутинга на сайте. Он почему-то просто отказывается работать. Есть файл About.jsx

import React from 'react';

const About = () => {
    return (
        <h1>
            Это приложение создано в качестве обучения
        </h1>
    );
};

export default About;

И есть файл App.js, в котором непосредственно выполняется роутинг:

import About from "./pages/About";
function App() {
    return (
        <BrowserRouter>
            <Route path="/about">
                <About/>
            </Route>
        </BrowserRouter>
    )
}

export default App;

На выходе я не получаю ничего, пустой лист. Подскажите, пожалуйста в чем может быть проблема?

2 ответа 2

0

Для начала по документации необходимо импортировать import Route from "react-router-dom" Здесь можно прочитать: https://reactrouter.com/docs/en/v6/getting-started/installation

1
  • Все уже импортировано) Просто решил здесь это не показывать, я продемонстрировал, что самое главное - блок About я импортировал.
    – DeV1to
    13 мар 2022 в 8:01
0

Причин, почему конкретно в вашем примере может не отображаться ничего - несколько.

Во-первых, вы забыли указать "home" роут, который бы рендерился, как вариант по-умолчанию. Пример такого роута вот такой

  <Route exact path="/">
    <Home />
  </Route>

Во-вторых, вы могли случайно поставить новую версию react-router-dom. Ваш пример подходит для версии 5, сейчас же уже актуальная версия библиотеки 6. Поэтому стоит перепроверить установленную версию и при необходимости либо откатиться, либо актуализировать код под новый апи.

Подправил немного код, чтобы он заработал.

import "./styles.css";
import { BrowserRouter, Switch, Route } from "react-router-dom";

function About() {
  return (
    <div>
      <h1>About page</h1>
    </div>
  );
}

function Home() {
  return (
    <div>
      <h1>Home page</h1>
    </div>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route exact path="/">
          <Home />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

Ссылка на песочницу, чтобы можно было посмотреть на решение изнутри: https://codesandbox.io/s/boring-tree-15idoq?file=/src/App.js

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.