目录
扩展学习资料
安装和导入
Route匹配
@src/App.js
扩展学习资料
| 资料名称 | 链接 | 备注 |
| 阅读react router组件文档 | https://react-router.docschina.org/web/guides/philosophy Introduction | React Router 中文文档 | 扩展阅读 |
| 路由鉴权 | React路由鉴权 - 掘金 | 无 |
| React-Router v6 新特性解读及迁移指南 | React-Router v6 新特性解读及迁移指南_前端劝退师的博客-CSDN博客 |
安装和导入
// v6
npm install react-router-dom --save - react-router 路由核心功能
- react-router-dom 基于【依赖】React-router，加入了一些在浏览器运行下的一些功能
基于浏览器开发的我们，只需要安装react-router-dom就可以了
react-router-dom 提供的相关组件
- BrowserRouter（基于history Api） http://www.abc.com/article/a1
- hashRouter （#锚点路由） http://www.abc.com/#/article/a1
Route匹配
npm i react-router-dom@5.2.0- Route
- 比较path属性和当前地址的pathname。当一个匹配成功，它将渲染其内容，当它不匹配时就会渲染null
- Switch
- 一个会遍历其所有的子元素，并仅渲染与当前地址匹配的第一个元素
- Link
- 使用作为url的导航，让整个应用不刷新页面在不同网址之间切换
@src/components/navbar.jsx
import React from 'react';
import { Link } from 'react-router-dom';
// 因为组件都打包到了bundle.js中，所以根据Link路由去判断组件加载就不会请求网络数据
const NavBar = () => {return (<ul><li>{/* 只加载局部组件 */}<Link to='/'>Home</Link></li><li><Link to='/products'>Products</Link></li><li><Link to='/posts/2018/06'>Posts</Link></li><li><Link to='/admin'>Admin</Link></li></ul>);
};
export default NavBar;npm i react-router-dom@6.2.0- Routes
- 替换Switch，更好用。
@src/App.js
import React, { Component } from 'react';
import NavBar from './components/navbar';
import Products from './components/products';
import Posts from './components/posts';
import Home from './components/home';
import Dashboard from './components/admin/dashboard';
// import ProductDetails from './components/productDetails';
// import NotFound from './components/notFound';
import { Route, Routes, Switch } from 'react-router-dom';
class App extends Component {render() {return (<div><NavBar /><div className='container'><Routes>{/* v6版本语法 */}<Route path='/products' element={<Products groupId="99" />} /><Route path='/posts' element={<Posts />} /><Route path='/admin' element={<Dashboard />} /><Route path='/' element={<Home />} />{/*v5版本语法 // <Switch> || exact只匹配第一个符合路由的组件<Route path='/' exact component={Home} /><Switch><Route path='/products' render={()=><Products {...this.props} groupId="99" />} /></Switch>*/}</Routes></div></div>);}
}
export default App;react-router v5文档 中文文档
