Маршруты не ссылаются на файл js - ReactJS

В данный момент я изучаю интерфейс reactjs. Но я застрял, что маршруты не работают.
Я использую ReactJS version 18.0.0

Мое приложение.js:

import logo from './logo.svg';
import './App.css';
import { Home } from './Home';
import { BrowserRouter, Route, Routes, NavLink } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
    <div className="App container">
      <h3 className="d-flex justify-content-center m-3">
        React JS Frontend
      </h3>
        
      <nav className="navbar navbar-expand-sm bg-light navbar-dark">
        <ul className="navbar-nav">
          <li className="nav-item- m-1">
            <NavLink className="btn btn-light btn-outline-primary" to="/home">
              Home
            </NavLink>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path='/home' component={Home} />
      </Routes>
    </div>
    </BrowserRouter>
  );
}

export default App;

Затем мой Home.js:

import React,{Component} from 'react';

export class Home extends Component{
    render(){
        return(
            <div>
                <h3>This is Home page</h3>
            </div>
        )
    }
}

Нужен совет пожалуйста.
Спасибо.

Попробуйте заменить в Route компонент -> элемент

Levaya Pochta 10.04.2022 16:54
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
1
9
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Кажется, вы путаете реквизит component для своего Route со старой версией react-router.

Измените его на element следующим образом:

<Routes>
  <Route path='/home' element={Home} />
</Routes>

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

Haminteu 10.04.2022 16:57

Молодец, меня тоже это зацепило, когда вышла новая версия. Я бы посоветовал вам просто помнить о том, какую версию вы установили, а не какую версию документации вы читаете.

Barry Michael Doyle 10.04.2022 16:58

Другие вопросы по теме