新手对于react-router中一点关键点的理解

React项目的可用的路由库是React-Router,当然这也是官方支持的。它也分为：

react-router 核心组件

react-router-dom 应用于浏览器端的路由库（单独使用包含了react-router的核心部分）

react-router-native 应用于native端的路由

为什么需要使用react-router呢？一般使用什么？

当你写了很多react组件后，想要实现不同组件之间的切换和跳转的时候，react-router就派上用场了。一般只使用react-router-dom就能满足我们的需要。

安装方法

npm install --save react-router-dom

使用前要先引入

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'//这里将BrowserRouter重命名为Router

使用举例

<Router>
  <div>
    <ul>
      <li><Link to="/">主页</Link></li>
      <li><Link to="/hot">热门</Link></li>
      <li><Link to="/zhuanlan">专栏</Link></li>
    </ul>
    <hr/>
    <Route  exact path="/" component={App}></Route>
    <Route path="/hot" component={Hot} ></Route>
    <Route path="/zhuanlan" component={Zhuanlan}></Route>
  </div>
</Router>

<Router></Router>相当于一个盒子，里面只能包含一个子元素。

react-router4之后，<Router></Router>标签里面可以包含任何html标签和react组件。

然而并不是react-route的其他标签必须包在Router里面，比如只要通过import { Route, Link} from 'react-route-dom'引入，可以随意单独使用Route和Link标签。

<Link></Link>标签和<a></a>标签类似，点击<Link></Link>标签中的元素可以实现组件跳转。跳转到哪个组件要看path的值"/"代表根路径，相当于localhost:8080这个路径，我们发现有一个<Route></Route>的path属性和这个Link标签的path值相同，当用户点击Link标签时，会触发和它具有相同path值的Route的component渲染，并且浏览器的网址那里的url变成他们的path值代表的路径。因此，可以理解为，“路由”就是要实现url跳转，注意不要和直接打开html文件哪个本地文件路径搞混了，这里改变的是网址URL，就是你的path值，前面加上localhost:8080。

那么问题来了，url和文件路径的区别是什么？

我们以前练习的时候，打开我们的index.html是手动直接打开的，它在浏览器中显示的路径就是以我们的电脑哪个磁盘开始的资源路径，就是这个文件在电脑中的位置。

url路径不同于资源路径，我们的组件Hot的url路径是localhost:8080/hot，这是我们自己定义的，和Hot组件在电脑中的位置无关，反正只要我们在<Route></Route>中定义了这个component的path，那么这个组件的url就确定了，不用管它在电脑中的位置，当然，在当前文件中必须先引入这个组件，还是按电脑中的相对路径来的。

react-router4路由嵌套

路由嵌套，顾名思义就是路由/URL路径的嵌套，比如，若Hot组件的路由是localhost:8080/hot，如果我们想要得Hot组件添加一个子组件Girl，每次我们渲染Girl的时候，Hot也会自动和他一起渲染，那么可以这样写

//父组件中
<Router>
  <div>
    <Route  exact path="/" component={App}></Route>
    <Route path="/hot" component={Hot} ></Route>
    <Route path="/zhuanlan" component={Zhuanlan}></Route>
  </div>
</Router>

//子组件中
    <Route path="/hot/girl" component={Girl} ></Route>  

理解<Route></Route>,在react-router4中，将他看做一个类似于组件的东西，你想在哪里渲染组件，就把他写在哪里

//入口组件app.js
            <Router history={hashHistory}>
                <div>
                    <Route exact path="/" component={PCIndex}></Route>              
                    <Route path="/hf" component={HeaderAndFooter}></Route>
                </div>  
            </Router>

//HeaderAndFooter组件
            <div>
                <PCHeader />
                <Route path="/hf/paper" component={BodyPaper}></Route>
                <Route path="/hf/people" component={BodyPeople}></Route>
                <BodyFooter />
            </div>

路由对应：

localhost:8080----渲染PCIndex组件

localhost:8080/hf----渲染HeaderAndFooter组件

localhost:8080/hf/paper----同时渲染BodyPaper和HeaderAndFooter组件组件，并且BodyPaper组件在PCHeader组件和BodyFooter组件的中间

localhost:8080/hf/people----同时渲染BodyPeople和HeaderAndFooter组件组件，并且BodyPeople组件在PCHeader组件和BodyFooter组件的中间

 

组件路由参数传递match理解

通过Route路由的组件，可以拿到一个match参数，这个参数是一个对象，其中包含几个数据：

isExact：这个关键字表示是为作全等匹配，比如，写了exact，“/”只能匹配PCIndex组件，而不写那就问题大了，在localhost:8080路径下，还可以匹配到HeaderAndFooter组件，并将其渲染。

params:path中包含的一些额外数据

path:Route组件path属性的值

url:实际url的hash值

示例

const HeaderAndFooter = ({match}) => (//{match}要先引入
    <div>
        <PCHeader />
        <Route path={`${match.url}/paper`} component={BodyPaper}></Route>
        <Route path="/hf/people" component={BodyPeople}></Route>
        <BodyFooter />
    </div>
)

export default HeaderAndFooter;

${match.url}获取到的路径就是HeaderAndFooter的path路径

这里用到了es6的模板字符串功能，两个反单引号括起来的字符串，里面可以放js语句，比如变量，但需要将变量名写在${}之中

模板字符串之中还能调用函数let msg = Hello, ${place};

 

逆战班