Raect Router 4 的使用 (1)

本文来自于官方文档，属于意译而非直译

• 基本组件

React Router 有三种类型的组件，分别是：react-router、react-router-dom、react-router-native

你在web 程序中使用了路由组件，那你就应该引入 react-router-dom：

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

• 路由

React Router 应用程序的的核心是路由组件。对于 web 项目，react-router-dom 提供了 <BrowserRouter> 和 <HashRouter> 路由。这两种方法都专门创建了 history 对象 。一般来说，

如果你有一个响应请求的服务器，你应该使用  <BrowserRouter> 路由；如果你使用的是静态文件服务器，你应该使用  <HashRouter> 路由。

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App/>
  </BrowserRouter>
), holder)

路由组件无法接受两个及两个以上的子元素，看一下我自己写的

ReactDom.render((
    <HashRouter history={hashHistory}>
        <Switch>
            <Route exact path="/" component={App}/>
            <Route path="/repos" component={Repos}/>
            <Route path="/about" component={About}/>
        </Switch>
    </HashRouter>
),document.getElementById('app'))

在这接受的是一个 switch 子元素。其实还可以这样写：

const RoutersComponent = ()=>(
    <Switch>
        <Route exact path="/" component={App}/>
        <Route path="/repos" component={Repos}/>
        <Route path="/about" component={About}/>
    </Switch>
)

ReactDom.render((
    <HashRouter history={hashHistory}>
        <RoutersComponent />
    </HashRouter>
),document.getElementById('app'))

其实这个就和官方的例子没有什么区别了

• 路由匹配

这里有两种路由匹配组件：<Route> 和 <Switch>

import { Route, Switch } from 'react-router-dom'

路由匹配是通过比较一个 <Route> 的路径和当前位置的路径名来完成的。当一个 <Route> 匹配时将渲染匹配到的内容，如果不匹配是将不会渲染。一个<Route> 没有 path，那它总是匹配的

// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>

你可以在你想要渲染内容的位置包含一个 <Route>，但是将 <Route> 放在一起是很有意义的。用 <Switch> 组件将 <Route> 组合在一起：

<Switch>
  <Route exact path='/' component={Home}/>
  <Route path='/about' component={About}/>
  <Route path='/contact' component={Contact}/>
</Switch>

<Switch> 将 <Route> 组合在一起不是必须的，但是是非常有用的。<Switch> 将迭代所有的子元素 <Route>  并且只渲染当前位置匹配的第一个。当多个路径匹配到相同的路径名时，这是非常有帮助的。当在路径之间进行动画转换时，在确定没有路径匹配到当前位置时(你可以呈现404)

<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>

解释一下 “只渲染匹配到的第一个” ：（http://localhost:8081/#/repos）

<Switch>
        <Route exact path="/repos" component={App}/>
        <Route path="/repos" component={Repos}/>
        <Route path="/about" component={About}/>
</Switch>

在这里你只可以看到 App 的内容，看不到 Repos 的内容，因为 App 是匹配到的第一个