Не работает роутинг на React JS

Question

Учу реакт и столкнулся с проблемой роутинга на сайте. Он почему-то просто отказывается работать. Есть файл 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;

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

Answer 1

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

Answer 2

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

Во-первых, вы забыли указать "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

БЛОГ НА HUSL

Не работает роутинг на React JS

Ответы (2 шт):