react-router-dom 记录

参考：https://www.jianshu.com/p/fb201f82cf8c

安装 react-router-dom

npm install react-router-dom

一.基本使用

App.js

import React from 'react'
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'

import A from "../components/a";
import B from "../components/b";
import B1 from "../components/b1";
import C from "../components/c";

export default function App() {
  return (
    <Router>
      <ul>
        <li><Link to="/a">A 组件</Link></li>
        <li><Link to="/b">B 组件</Link></li>
        <li><Link to="/e">E 组件</Link></li>
      </ul>
      <Route>
        <Switch>
          <Route exact path="/a" component={A} />
          <Route exact path="/b" component={B} />
          <Route exact path="/" component={A} />
        </Switch>
      </Route>
    </Router>
  )
}

在index.js文件引入

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js' // App路由文件

ReactDOM.render(<App/>, document.getElementById('root'))

代码解析：

1. 路由分为两种 BrowserRouter 和 HashRouter。两种用法类似，表现形式上有一定差异。
2. <Switch> 路由中的Switch 代表只匹配一个路由，如果不使用 <Switch> 嵌套，路由会多次匹配
3. <Link> 标签，类似于 <a> 标签(最终也会被渲染为 a 标签)。to 属性即可理解为 a 标签的 href属性
4. <Route> 的 path 表示属性匹配路径
5. <Route> 的 component 表示路径匹配成功后渲染的组件

二.路由传参

在 react 中 有两种方式进行路由传值

1. 通过 原始的 GET 路径后面，添加 ?key=value 的方式
   • 在 组件内部 使用 this.props.location.search的方式获取键值对(只不过获取过后还是一个字符串，需要进一步的解析)
2. 通过动态路由传值(占位符)。类似于/a/:id/:value
   • 在组件内部 使用 this.props.match.params.xxxx 来获取。

三.路由嵌套

使用<Route> 标签中的另一个属性 render，然后通过this.props.children来展示

import { Route, Switch} from "react-router-dom";

import A from "../components/a";
import B from "../components/b";
import B1 from "../components/b1";
import C from "../components/c";
import React from "react";

const Routers = () => {
    return (
    <Switch>
        <Route exact path='/a/:age/:name' component={A}></Route>
        <Route path='/b' render={()=>(
            <B>
                <Switch>
                    <Route exact path='/b/b1' component={B1}></Route>
                </Switch>
            </B>
        )}></Route>
        <Route exact path='/c' component={C}></Route>
    </Switch>
    )
}

//b组件

import React,{Component} from "react";
import { Link } from "react-router-dom";

class B extends Component{
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                B页面
                <Link to='/b/b1'>B1</Link>
                <div className={'ccccccccc'}>
                    { this.props.children }
                </div>
            </div>
        )
    }
}
export default B