路由不链接到 js 文件 - ReactJS

Question

我现在正在学习reactjs前端。但我被Routes不起作用所困扰
我正在使用ReactJS version 18.0.0

我的应用程序：

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;

然后我的家.js:

import React,{Component} from 'react';
export class Home extends Component{
render(){
return(
<div>
<h3>This is Home page</h3>
</div>
)
}
}

需要建议
谢谢。

Answer 1

您似乎将Route的component道具与旧版本的react-router混淆了。

将其更改为element，如下所示：

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