В данный момент я изучаю интерфейс 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>
)
}
}
Нужен совет пожалуйста.
Спасибо.
Кажется, вы путаете реквизит component
для своего Route
со старой версией react-router
.
Измените его на element
следующим образом:
<Routes>
<Route path='/home' element = {Home} />
</Routes>
Да, если честно. Я только учусь прямо сегодня. Любое предложение, чтобы понять на каждой версии?
Молодец, меня тоже это зацепило, когда вышла новая версия. Я бы посоветовал вам просто помнить о том, какую версию вы установили, а не какую версию документации вы читаете.
Попробуйте заменить в
Route
компонент -> элемент