React路由

路由介绍

1.安装react-router-dom

1.1 在项目命令行中，执行

cnpm install react-router-dom -S

2.路由使用

• HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；
• Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
• Link表示一个路由的链接

2.1 先引入路由模块

import {HashRouter,Route,Link} from 'react-router-dom’

2.2 注意：

• Route 组件path地址是以/开头 ，配置component属性，是显示的组件，这个属性不可以大写

• Route组件可以单双标签使用，单标签需要/结尾，双标签不可以在中间写入别的东西

• Link to属性的地址也是/开头，Link在页面渲染的是a标签

  例：

render(){
        return (
            <HashRouter>
                <div>
                    <h1>这是网站的根目录</h1>
                    <hr />
                    <Link to="/home">首页</Link>&nbsp;&nbsp;
                    <Link to="/movie/">电影</Link>&nbsp;&nbsp;
                    <Link to="/about">关于</Link>
                    <hr />
                    <Route path="/home" component={Home} ></Route><hr/>
                    <Route path="/movie" component={Movie} exact></Route><hr/>
                    <Route path="/about" component={About}></Route><hr/>
                </div>
            </HashRouter>
        );
    }

3.路由传值

3.1、React-router-dom路由传值

通过配置路由的地址，在Link跳转时

• Route path路径后面 /:id
• Link to 路径后面 /top/10
• 接收传值：
• class类组件，this.props.match.params.属性名
• 函数组件：形参.match.params.属性名

3.2 在Route内置组件中，配置path地址：

 <Route path="/movie/:type/:id" component={Movie} exact></Route>

3.3 在Link内置组件中，配置to属性，进行跳转：

<Link to="/movie/top/10">电影</Link>

例：

render(){
        return (
            <HashRouter>
                <div>
                    <h1>这是网站的根目录</h1>
                    <hr />
                    <Link to="/movie/top/10">电影</Link>&nbsp;&nbsp;
                    <hr />
                    <Route path="/movie/:type/:id" component={Movie} exact></Route>
                </div>
            </HashRouter>
        );
    }

3.4 类组件中通过生命周期进行接收，this.props携带路由传递过来的数据：

class Movie extends React.Component{

    constructor(props){
        super();
        this.state = {
            routeParams:props.match.params
        }
    }

    render(){
        console.log(this);
        return (
            <div>
                电影--{this.state.routeParams.type}--{this.state.routeParams.id}
            </div>
        );
    }
}

3.5 函数组件中通过形参接收传递过来的值，props形参，函数组件作为路由组件，props就是传递过来的对象，里面携带着路由传递过来的数据

import React from 'react'

export default function home(props) {
	return (
		<div>
			{props.match.params.id}
		</div>
	)
}

4嵌套路由

4.1 嵌套路由：在路由组件中，使用Link， Route，配置子路由，实现跳转，

4.2 下面为一级路由，在一级路由Home为路由组件

<Route path="/home" component={ Home }></Route>

4.3 在Home组件中继续使用Link，Route进行路由的嵌套，需要注意的就是路由地址，前部分为一级路由地址，后面接一个二级路由相应的路径

render() {
    return (
        <div>
            <ul>
            	<li><Link to="/home/a">推荐</Link></li>
            	<li><Link to="/home/b">新时代</Link></li>
                <li><Link to="/home/c">动漫</Link></li>
            </ul>
            <Route path="/home/a" component={ A }></Route>
            <Route path="/home/b" component={ B }></Route>
            <Route path="/home/c" component={ C }></Route>
        </div>
    )
}

5.完整案例：

路由首页：

import React from 'react';
import Sy from './Sy';
import {HashRouter,Link,Route} from 'react-router-dom';
import { Button,Icon} from "antd";
import "antd/dist/antd.css";
class Ly extends React.Component{
    render(){
        return(
            <HashRouter>
                <div>
                    <h3>这是首页</h3>
                    <Link to="/Sy">首页</Link>
                    <Route path="/Sy" component={Sy}></Route>
                    <Button type="dashed" icon="sketch">按钮</Button>
                </div>
            </HashRouter>
        )
    }
}
export default Ly;

一级路由子页：

import React from 'react';
import {Link,Route} from 'react-router-dom';
import Sy2 from './Sy2';
class Sy extends React.Component{
   render(){
        return(
            <div>
            <Link to="/Sy/sy2">首页1</Link>
            <Route path="/Sy/sy2" component={Sy2}></Route>
            </div>
        )
    }
}
export default Sy;

路由嵌套路由子页：

import React from 'react';
class Sy2 extends React.Component{
    render(){
        return(
            <ul>
                <li>首页2</li>
            </ul>
        )
    }
}
export default Sy2;

展示效果：

一级路由效果图：
解释：点击第一个首页，出现首页1

路由嵌套路由效果图：
解释：点击第一个首页1，出现首页2