安装
输入以下命令进行安装：
// npm npm install react-router-dom // yarn yarn add react-router-dom
react-router相关标签
react-router常用的组件有以下八个：
import { BrowserRouter, HashRouter, Route, Redirect, Switch, Link, NavLink, withRouter, } from 'react-router-dom'
简单路由跳转
实现一个简单的一级路由跳转
import { BrowserRouter as Router, Route, Link } from 'react-router-dom' import Home from './home' import About from './about' function App() { return ( <div className="App"> <Router> <Link to="/home" className="link">跳转Home页面</Link> <Link to="/about" className="link">跳转About页面</Link> <Route path="/home" component={Home}/> <Route path="/about" component={About}/> </Router> </div> ); } export default App;
效果如下：
要点总结：
Route组件必须在Router组件内部
Link组件的to属性的值为点击后跳转的路径
Route组建的path属性是与Link标签的to属性匹配的;component属性表示Route组件匹配成功后渲染的组件对象
嵌套路由跳转
React 的路由匹配层级是有顺序的
例如，在 App 组件中，设置了两个路由组件的匹配路径，分别是 /home 和 /about，代码如下：
import { BrowserRouter as Router, Route, Link, } from 'react-router-dom' import Home from './home' import About from './about' function App() { return ( <div className="App"> <Router> <Link to="/home">跳转Home页面</Link> <Link to="/about">跳转About页面</Link> <Route path="/home" component={Home}/> <Route path="/about" component={About}/> </Router> </div> ); } export default App;
然后 Home 组件中同样也想设置两个路由组件的匹配路径，分别是 /home/one 和 /home/two，此时就可以看出，这个 /home/one 和 /home/two 为上一级路由 /home 的二级嵌套路由，代码如下：
import React from 'react' import { Route, Link, } from 'react-router-dom' import One from './one' import Two from './two' function Home () { return ( <> 我是Home页面 <Link to="/home/one">跳转到Home/one页面</Link> <Link to="/home/two">跳转到Home/two页面</Link> <Route path="/home/one" component={One}/> <Route path="/home/two" component={Two}/> </> ) } export default Home
特别注意：Home 组件中的路由组件 One 的二级路由路径匹配必须要写 /home/one ，而不是 /one ，不要以为 One 组件看似在 Home 组件内就可以简写成 /one
动态链接
NavLink可以将当前处于active状态的链接附加一个active类名，例如：
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom' import Home from './home' import About from './about' function App() { return ( <div className="App"> <Router> <NavLink to="/home" className="link">跳转Home页面</NavLink> <NavLink to="/about" className="link">跳转About页面</NavLink> <Route path="/home" component={Home}/> <Route path="/about" component={About}/> </Router> </div> ); } export default App;
/* 设置active类的样式 */ .active { font-weight: blod; color: red; }
效果如下：
路由匹配优化
当点击跳转链接时，会自动去尝试匹配所有的Route对应的路径，如图所示：
正常情况下，只需匹配到一个规则，渲染即可，即匹配成功一个后，无需进行后续的匹配尝试，此时可以用Switch组件，如下所示：
import { BrowserRouter as Router, Route, NavLink, Switch, } from 'react-router-dom' import Home from './home' import About from './about' function App() { return ( <div className="App"> <Router> <NavLink to="/home" className="link">跳转Home页面</NavLink> <NavLink to="/about" className="link">跳转About页面</NavLink> <Switch> <Route path="/home" component={Home}/> <Route path="/about" component={About}/> <Route path="/home" component={Home}/> <Route path="/home" component={Home}/> {/* 此处省略一万个Route组件 */} <Route path="/home" component={Home}/> </Switch> </Router> </div> ); } export default App;
效果如下：
要点总结：
- 将多个
Route组件同时放在一个Switch组件中，即可避免多次无意义的路由匹配，以此提升性能
重定向
当页面跳转时，若跳转链接没有匹配上任何一个 Route 组件，那么就会显示 404 页面，所以我们需要一个重定向组件 Redirect ，代码如下：
import { BrowserRouter as Router, Route, NavLink, Switch, Redirect, } from 'react-router-dom' import Home from './home' import About from './about' function App() { return ( <div className="App"> <Router> <NavLink to="/home" className="link">跳转Home页面</NavLink> <NavLink to="/about" className="link">跳转About页面</NavLink> <NavLink to="/shop" className="link">跳转Shop页面</NavLink> {/* 点击，跳转到/shop，但该路径没有设置 */} <Switch> <Route path="/home" component={Home}/> <Route path="/about" component={About}/> <Redirect to="/home" /> {/* 当以上Route组件都匹配失败时，重定向到/home */} </Switch> </Router> </div> ); } export default App;
效果如下：
