页面中使用路由导航
react中路由使用步骤:
1. 安装:
npm i react-router-dom
2. 导入路由的三个核心组件:Router、Route、Link
import { BrowserRouter as Router,Link, Routes, Route } from 'react-router-dom';
注:BrowserRouter as Router 我们实际上是使用 react-router-dom 中的 BrowserRouter ,然后为了方便使用起了个别名为 Router;
3.使用 Router 组件包裹整个应用!
const App=()=>{
<Router>
<div className='App'>
//内容页面
</div>
</Router>
}
ReactDOM.render(<App/>,document.getElementById('root'))
4.使用Link组件作为导航菜单(路由入口)
<Link to="/路由地址">页面1</Link>
5.使用Routes、Route组件配置路由规则和要展示的组件(路由出口)
import React from 'react';
import ReactDOM from 'react-dom';
// 路由
import { BrowserRouter as Router,Link, Routes, Route } from 'react-router-dom';
const First = ()=> <p>页面1的内容</p>
const Second = ()=> <p>页面2的内容</p>
class App extends React.Component{
state={
routers:[
{
title: 'First',
path: '/',
component: First,
},
{
title: 'Second',
path: '/second',
component: Second,
},
]
}
render(){
return (
<Router>
<div>
<h3>React路由基础</h3>
{this.state.routers.map((item, index) => {
return (
<Link
key={index}
to={item.path}
>
{item.title}
</Link>
);
})}
<Routes>
{this.state.routers.map((item, index) => {
return (
<Route
key={index}
exact
path={item.path}
element={<item.component />}
/>
);
})}
</Routes>
</div>
</Router>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'))
注:path属性要和要跳转的Link组件的路由地址相同;
element属性表示点击路由跳转后要展示的组件;
这是 react-router-dom V6版本语法,与V5及以上语法差异较大,使用V5版本时按以下语法:
import { BrowserRouter as Router,Link, Route } from 'react-router-dom';
const First=()=>{
return (<p>页面1的内容</p>)
}
const App=()=>{
<Router>
<div>
<h3>React路由基础</h3>
<Link to="/first">页面1</Link>
<Route path="/first" component={First}></Route>
</div>
</Router>
}
ReactDOM.render(<App/>,document.getElementById('root'))
编程式导航
通过js代码来实现页面跳转
V6:
import { useNavigate } from 'react-router-dom';
//使用时:
const navigate = useNavigate();
navigate('要跳转的页面路径')
V5:
this.props.history.push("要跳转的页面路径")
react-router-dom v6版本踩坑:
1. 在v6版本中,若想使用
const navigate = useNavigate();
navigate('要跳转的页面路径')
的方式进行路由跳转。那么使用该方法的组件必须使用函数组件而不能使用类组件!
否则会报Hooks方面的错误!
2. 在v6版本中若想使用路由嵌套,就必须按如下方式
父组件路由:
<Routes>
<Route path="/home/*" element={<Home/>}></Route>
</Routes>
子组件路由:
{/* 渲染子路由 */}
<Routes>
<Route path="children" element={<Children />}></Route>
</Routes>
v5版本则是这样:
父组件路由:
<Route path="/home" component={Home}></Route>
子组件路由:
{/* 渲染子路由 */}
<Route path="/home/children" component={Children}></Route>
3. 路由重定向问题:
在v6版本中,路由重定向:
import {React,useEffect} from 'react';
// 导入路由所需组件
import { BrowserRouter as Router, Routes, Route,useNavigate } from 'react-router-dom';
// 导入创建的组件
import Home from "./pages/Home"
import CityList from "./pages/CityList"
//创建路由重定向组件
function Redirect({ to }) {
let navigate = useNavigate();
useEffect(() => {
navigate(to);
});
return null;
}
function App() {
return (
<Router>
<div className="App">
{/* 项目根组件 */}
{/* 配置路由 */}
<Routes>
{/* 路由重定向 */}
<Route path="/" element={<Redirect to="/home" />}></Route>
<Route path="/home/*" element={<Home/>}></Route>
<Route path="/cityList" element={<CityList/>} exact></Route>
</Routes>
</div>
</Router>
);
}
export default App;