1.安装react-router-dom
yarn add react-router-dom@6
2.页面引入模块
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom'
代码实例
// 引入组件
import Home from './components/Home'
import Detail from './components/Detail'
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom'
//进行路由配置
function App () {
return (
<BrowserRouter>
{/*指定跳转的组件, to属性用来配置路由地址*/}
<Link to='/' style={{ marginRight: '20px' }}>首页 </Link>
<Link to='/detail'>详情 </Link>
<Routes>
{/*path属性和link中的to属性相对应 element代表要渲染的组件 path和element都是成对出现的*/}
<Route path='/' element={<Home />} ></Route>
<Route path='/detail' element={<Detail />} ></Route>
</Routes>
</BrowserRouter>
)
}
export default App