React 生态应用 - React Router（1）

目录

扩展学习资料

 安装和导入

Route匹配

@src/components/navbar.jsx

@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文档 中文文档