10.路由

一、摘要

1.看文档
    https://reactrouter.com/web/example/basic

2.安装
    cnpm i react-router-dom --save

3.在app.js中使用
	import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
				<Router>   
                <Route exact path="/" component={Home} />
                <Route path="/news" component={News} />            
        </Router>

二、简单的路由例子

@file(app.js)

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';

function App() {
    return (
        <Router>    
            <div>
                <div className="menus">
                    <Link to="/">首页</Link>
                    <Link to="/news">新闻页</Link>
                    <Link to="/product">产品页</Link>
                </div><br/><hr/>
                
                <Route exact path="/" component={Home} />
                <Route path="/news" component={News} />
                <Route path="/product" component={Product} />
            </div>
        </Router>
    );
}

三、动态路由传值和取值

1.摘要

<Route path="/newsDetail/:id" component={NewsDetail} />

<Link to={`/newsDetail/${item.aid}`}>{item.name}</Link>

this.props.match.params

2.详细例子

1.App.js

import './assets/css/index.css'
// 1.引入
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from './components/Home';
import News from './components/News';
import NewsDetail from './components/NewsDetail';
import Product from './components/Product';

function App() {
    return (
        <Router>    
            <div>
                <div className="menus">
                    <Link to="/">首页</Link>
                    <Link to="/news">新闻页</Link>
                    <Link to="/product">产品页</Link>
                </div><br/><hr/>
                
                <Route exact path="/" component={Home} />
                <Route path="/news" component={News} />
                <Route path="/newsDetail/:id" component={NewsDetail} />
                <Route path="/product" component={Product} />
            </div>
        </Router>
    );
}
export default App;

2.News.js

import React from 'react';
import { Link } from "react-router-dom";
class News extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                {aid: 1, name: '新闻1'},
                {aid: 2, name: '新闻2'},
                {aid: 3, name: '新闻3'},
            ]
        }
    }

    render() {
        return (
            <div>
                <h1>我是News</h1>
                <ul>
                    {
                        this.state.list.map((item, key)=>{
                        return (
                            <li key={key}>
                                <Link to={`/newsDetail/${item.aid}`}>{item.name}</Link>
                            </li>
                        )
                        })
                    }
                </ul>
            </div>
        )
    }
}
export default News;

3.NewsDetail.js

class NewsDetail extends React.Component {
    componentDidMount(){
        let params = this.props.match.params;
        console.log(params);
    }
    render() {
        return (
            <div>
                <h1>我是NewsDetail</h1>
            </div>
        )
    }
}
export default NewsDetail;

四、get路由传值和获取（url插件）

1.摘要

<Route path="/productDetail" component={ProductDetail} />

<Link to={`/productDetail?aid=${item.aid}`}>{item.name}</Link>

// 详情页
// 取参方式1
let params = this.props.location.search; // 方式1：自己解析值

// 取参方式1：
// npm i url --save //解析传值
let query = url.parse(this.props.location.search, true).query;

2.详细例子

1.App.js - 配置路由

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Product from './components/Product';
import ProductDetail from './components/ProductDetail';
function App() {
    return (
        <Router>    
            <div>
                <Route exact path="/" component={Home} />
                <Route path="/product" component={Product} />
                <Route path="/productDetail" component={ProductDetail} />
            </div>
        </Router>
    );
}

2.列表页路由跳转、get传参

// 1.引入Link
import { Link } from "react-router-dom";

// 2.路由跳转
<Link to={`/productDetail?aid=${item.aid}`}>{item.name}</Link>

3.ProductDetail-获取get传参

import url from 'url';
class ProductDetail extends React.Component{
    constructor(props){
        super(props);
        this.state = {}
    }
    componentDidMount(){
        // 获取参数方法1
        // let params = this.props.location.search;

        // 获取参数方法2 
        let query = url.parse(this.props.location.search, true).query;
        console.log(query);
    }
    render(){
        return(<div><h1>我是Product-详情</h1></div>)
    }
}

1.使用url插件格式化订传过来的参数

1. 安装url插件
   cnpm i url --save
   
2. 使用
	 url.parse(this.props.location.search, true).query

五、路由跳转

1.html 跳转

// 1.引入Link
import { Link } from "react-router-dom";

// 2.路由跳转
<Link to={`/productDetail?aid=${item.aid}`}>{item.name}</Link>

2.js跳转

1.摘要

1.引入Redirect
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom";

2.定义一个flag

3.render里面判断
	if(this.state.loginFlag){ return( <Redirect to={{pathname: '/home'}} />) }
4.执行js跳转
    通过js改变loginFlag的状态，然后重走render

2.详细例子

import { BrowserRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom";
class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loginFlag: false
        }
    }

    login = () => {
        this.setState({loginFlag:true})
    }

    render() {
        if(this.state.loginFlag){
            return(
                // 跳转方式1
                //<Redirect to='/home' />
                // 跳转方式2
                <Redirect to={{pathname: '/home'}} />
            )
        }
        return (
            <div className='login-page'>
                <h1 className='tit'>登录页面</h1>
                <button className='btn' onClick={this.login}>登录</button>
            </div>
        )
    }
}

十、其他

1.exact

exact: 表示严格匹配