React:快速上手(6)——掌握React Router

引入Router

安装

npm install react-router-dom

基础组件

　　React Router中有三种类型的组件：路由器组件、路由匹配组件和导航组件。

路由器组件：Router

　　每个React Router应用程序的核心应该是路由器组件。对于Web项目，react-router-dom提供了两种类型的路由器：

<BrowserRouter>
<HashRouter>

　　一般来说，如果您有响应请求的服务器，则应使用<BrowserRouter>，如果使用静态文件服务器，则应使用<HashRouter>。

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(

  <BrowserRouter>

    <App />

  </BrowserRouter>,

  holder

);

　　BrowserRouter 和 HashRouter 都可以实现前端路由的功能，区别是前者基于url的pathname段，后者基于hash段，比如：

前者：http://127.0.0.1:3000/article/num1
后者：http://127.0.0.1:3000/#/article/num1（不一定是这样，但#是少不了的）

　　他们的区别是，在页面刷新后会将当前路由发送到服务器，后者不会，因为是Hash段。

关于Hash段：

　　在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。所以，使用HashRouter可以方便我们与后端集成，不然发送路由信息，服务器还需要针对处理！

路由器匹配组件：Route、Switch

　　有两个路由匹配组件：<Route>和<Switch>。我们在<Route>里面需要定义两个属性：

<Route path='/about' component={About}/>

//path:待匹配的路径

//component:待显示的组件

　　当<Route>匹配时，它将呈现其内容，当它不匹配时，它将呈现为null。没有路径的<Route>将始终匹配。<Route>通常与<Switch>一起使用，这样使得，一组Route只会显示最满足条件的一个：

<Switch>

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

  <Route path="/about" component={About} />

  <Route path="/contact" component={Contact} />

  {/* when none of the above match, <NoMatch> will be rendered */}

  <Route component={NoMatch} />

</Switch>

导航组件：Link、NavLink、Redirect

　　React Router提供可一个<Link>组件来在你的应用中创建超链接，其实它将被渲染为一个<a/>。<NavLink>是一种特殊的超链接，他可以设置激活样式，比如下面设置了激活时的class。

<NavLink to="/faq" activeClassName="selected">

  FAQs

</NavLink>

　　当然，你也可以直接在里面写好

<NavLink

  to="/faq"

  activeStyle={{

    fontWeight: "bold",

    color: "red"

  }}

>

  FAQs

</NavLink>

手动控制路由跳转

　　通过基础组件的调用，我们可以实现基础路由及导航。同时也可以在代码中实现更加灵活的路由跳转。

关于History对象

　　history是React Router提供核心功能的包。它能轻松地在客户端为项目添加基于location的导航，这种对于单页应用至关重要的功能。

　　如下图所示是history对象的数据结构：

　　其中的一些字段和函数的具体含义，我们可以通过访问https://segmentfault.com/a/1190000010251949来获取更多！

在React Router中的实现

　　首先，需要导入withRouter

import { withRouter } from "react-router-dom";

　　接着，history来压入路径

    handleClick = (e) => {

            ....

            this.props.history.push('/cam')

            ....

      }

　　最后，将当前组件进使用withRouter加工，生成高阶组件

export default withRouter(MSLoginForm);