react-router-dom 使用

demo 使用 creat-react-app 脚手架

安装 yarn add react-router-dom -S

"dependencies": {
    "react-router-dom": "^5.1.2"
 }

简单路由使用

src/components 目录下创建 Home.js, TodoList.js 用于路由界面显示

Home.js


import React from "react";

function Home() {
    return (
        <div className="Home">
            Home
        </div>
    )
}

export default Home;

TodoList.js


import React from "react";

function TodoList() {
    return (
        <div className="TodoList">
            TodoList
        </div>
    )
}

export default TodoList;

src 目录下创建 BasicRoute.js 配置路由

BasicRoute.js

import React from 'react'
import Home from './components/Home'
import TodoList from './components/TodoList'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

function BasicRoute() {
    return (
        <div className="BasicRoute ">
            <Router>
                <Link to='/'>Home</Link> <br/>
                <Link to='/TodoList'>TodoList</Link>
                <div>
                    <Route exact path='/' component={Home}/>
                    <Route exact path='/TodoList' component={TodoList}/>
                </div>
            </Router>
        </div>
    );
}

export default BasicRoute;

import React from 'react'
import BasicRoute from "./BasicRoute"
import './App.css'

function App() {
    return (
        <div className="App">
            <BasicRoute/>
        </div>
    );
}

export default App;

路由嵌套使用

基于上面基础 src/components 目录下创建 Detail.js, DetailChildOne.js DetailChildTwo.js用于路由界面显示

Detail.js 注：略有不同


import React from 'react'；
import {withRouter, Link} from 'react-router-dom'；

// 要使用 React.Component
class Detail extends React.Component {
    render() {
        return (
            <div>
                Detail页面<br/>
                <Link to="/detail">嵌套路由DetailChildOne页面</Link><br/>
                <Link to="/detail/DetailChildTwo">嵌套路由DetailChildTwo页面</Link>
                {/*嵌套的页面显示在这里*/}
                {this.props.children}
            </div>
        )
    }
}

// 将组件包裹进 Route, 然后返回
export default withRouter(Detail);

DetailChildOne.js


import React from "react";

function DetailChildOne() {
    return (
        <div className="DetailChildOne">
            DetailChildOne
        </div>
    )
}

export default DetailChildOne;

DetailChildTwo.js


import React from "react";

function DetailChildTwo() {
    return (
        <div className="DetailChildTwo">
            DetailChildTwo
        </div>
    )
}

export default DetailChildTwo;

修改 BasicRoute.js

import React from 'react'
import Home from './components/Home'
import Detail from './components/Detail'
import DetailChildOne from './components/DetailChildOne'
import DetailChildTwo from './components/DetailChildTwo'
import TodoList from './components/TodoList'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

function BasicRoute() {
    return (
        <div className="BasicRoute ">
            <Router>
                <Link to='/'>Home</Link> <br/>
                <Link to='/Detail'>Detail</Link> <br/>
                <Link to='/TodoList'>TodoList</Link>
                <div>
                    <Route exact path='/' component={Home}/>
                    {/*嵌套路由*/}
                    <Route path="/detail" render={() =>
                        <Detail>
                            <Route exact path="/detail" component={DetailChildOne}/>
                            <Route exact path="/detail/DetailChildTwo" component={DetailChildTwo}/>
                        </Detail>
                    }/>
                    <Route exact path='/TodoList' component={TodoList}/>
                </div>
            </Router>
        </div>
    );
}

export default BasicRoute;

exact使用

exact是Route的一个属性，认为其是一种严格匹配模式
当exact为false时，根据路由匹配所有组件，如"/" 匹配 “/”、“/Home”、“/Home/menu”；
当exact为true时，则“/” 仅匹配“/”、无法匹配到“/Home”。

url传参

通配符传参

Route：

<Route path='/path/:name' component={Path}/>

Link：

<Link to="/path/通过通配符传参">通配符</Link>

参数获取：

this.props.match.params.name

query传参

Route：

<Route path='/query' component={Query}/>

Link：

var query = {
        pathname: '/query',
        query: '我是通过query传值 '
}

<Link to={query}>query</Link>

参数获取：

this.props.location.query

3.state传参

Route：

<Link to={state}>state</Link>

Link：

var state = {
        pathname: '/state',
        state: '我是通过state传值'
    }

<Route path='/state' component={State}/>

参数获取：

this.props.location.state