一、路由配置相关

一、安装依赖

npm install react-router-dom

二、配置路由

在App.js

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

Tip: exact 路由严格匹配 只有路径为/才会加载对应路由 Switch 只匹配对应路径的路由

import Home from './views/Home'
import About from './views/About'
class App extends Component {
    render() {
        return (
            <div>
                <Router>
                    <ul>
                        <li><Link to="/">首页</Link></li>
                        <li><Link to="/about">about</Link></li>
                    </ul>
                    <Switch>
                        <Route exact path="/" component={Home}></Route>
                        <Route path="/about" component={About}></Route>
                        <Route path="/about/la" component={About}></Route>
                    </Switch>
                </Router>
            </div>
        );
    }
}

三、get传值

3-1 路由跳转

import {Link} from 'react-router-dom';
        <div>
         主页
         <Link to={`/detail?id=${this.state.id}`}>
             <Button>detail</Button>
         </Link>
    </div>

3-2 事件跳转

<div>
     主页
     <Button onClick={this.handleToggle}>detail</Button>
</div>
handleToggle=()=>{
        this.props.history.push(`/detail?id=${this.state.id}`)
    }

3-3 query-string解析get传值

//安装依赖 
yarn add query-string

//Detail.js
//this.props.location.search
import queryString from 'query-string'
class Detail extends Component {
    ...
    componentDidMount() {
        var url = this.props.location.search;
        console.log(queryString.parse(url))
    }
}
export default Detail;

四、动态路由

4-1 配置动态路由

<Route path="/detail/:id" component={Detail}></Route>

4-2 跳转

<Button onClick={this.handleToggle}>detail</Button>
handleToggle=()=>{
  this.props.history.push(`/detail/${this.state.id}`)
}

4-3 详情页接收

// this.props.match.params
componentDidMount() {
        console.log(this.props.match.params)
}

五、嵌套路由，路由重定向

5-1 在list路由下挂载二级路由

class List extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>
                        <Link to="/list/morning">新闻详情</Link>
                    </li>
                    <li>
                        <Link to="/list/night">晚间新闻</Link>
                    </li>
                </ul>
                <div>
                    <Switch>
                        <Route path="/list/morning" component={Morning}></Route>
                        <Route path="/list/night" component={Night}></Route>
                                                //路由重定向
                        <Redirect from="/list" to="/list/morning"></Redirect>
                    </Switch>
                </div>
            </div>
        );
    }
}
export default List;

5-2 this.props.match.url

//二级路由也可以配置成这样
<Route path={`${this.props.match.url}/list/morning`} component={Morning}></Route>

六、路由模块化

import React, { Component } from 'react';
import {
    Switch,
    Route,
    Link,
    Redirect
} from "react-router-dom";
import Morning from './Morning'
import Night from './Night'
let routes = [ 
    {path:'/morning',component:Morning},
    {path:'/night',component:Night}
]
class List extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>
                        <Link to="/list/morning">早间新闻</Link>
                    </li>
                    <li>
                        <Link to="/list/night">晚间新闻</Link>
                    </li>
                </ul>
                <div>
                    <Switch>
                        {routes.map(item=>{
                            return (<Route key={item.path} path={this.props.match.url+item.path} component={item.component}></Route>)
                        })}
                        <Redirect from="/list" to="/list/mornig"></Redirect>
                    </Switch>
                </div>
            </div>
        );
    }
    componentDidMount(){
        console.log(this.props.match.url)
    }
}
export default List;

七、二级路由

import React, { Component } from 'react';
import {
    Switch,
    Route,
    Redirect
} from "react-router-dom";
import Morning from './components/Morning'
import Night from './components/Night'
class About extends Component {
    render() {
        return (
            <div>
                关于页面
                <div>
                    <Switch>
                        <Route path="/about/morning">
                            <Morning/>
                        </Route>
                        <Route path="/about/night">
                            <Night/>
                        </Route>
                       //路由重定向
                       <Redirect from="/about" to="/about/morning"></Redirect>
                    </Switch>
                </div>
            </div>
        );
    }
}
export default About;

//使用component的方法的话,route标签不能有空格
<Route exact path="/" component={Home}></Route>