如何路由的传值

路由传值

步骤：1.首先安装react-router-dom
2.路由传值
3.嵌套路由

1.首先安装react-router-dom

（在项目命令中，执行cnpm install react-router-dom -S）
然后再引入

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

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

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>
        );
    }

2.路由传值

Link to 路径后面 /top/10 （写入具体的路径地址）
Route path路径后面 /:type/:id （通过参数来接收传过来的值）
通过this.props.match.proms.（参数名）来获取相对应的路径的值
（代码示例）

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>
        );
    }

获取路径值的代码

render(){
        return (
            <div>
                电影--{this.props.match.params.type}--{this.props.match.params.id}
            </div>
        );
    }

3.嵌套路由（多级路由）

（路由嵌套就是在原有路由的基础上再增加路由，在原有路由的页面上增添新的路由内容）

//一级路由
render(){ 
        return (
            <HashRouter>
                <div>
                    <Link to="/movie">电影</Link>&nbsp;&nbsp;
                    <hr />
                <hr/>
                    <Route path="/movie" component={A3}></Route><hr/>
                </div>
            </HashRouter>
        );
    }
}

//二级路由（实现嵌套）
render(){
    return(
        <React.Fragment>
   <div>
        <Link to='/movie/shehui'>社会</Link>
        <Route path='/movie/shehui' component={Ap}></Route>
    </div>
     </React.Fragment>
    )
}
}

（以上是对路由所做的一些总结，可供大家参考）