react-router

1.     安装

npm install react-router 
# or 
yarn add react-router

web 端使用 react

npm install -g create-react-app
create-react-app demo-app
cd demo-app

yarn add react-router-dom

2.     使用

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

render(
 (<Router>
     <Route path="/" component={App}/>
     <Route path="/repos" component={Repos}/>
     <Route path="/about" component={About}/></Router>), document.getElementById('app')
);

用户访问根路由/（比如 http://www.example.com/ ），组件APP就会加载到document.getElementById(‘app’)

嵌套路由

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>

// 用户访问/repos时，会先加载App组件，然后在它的内部再加载Repos组件

子路由也可以不写在Router组件里面，单独传入Router组件的routes属性。

let routes = <Route path="/" component={App}>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
</Route>; 
<Router routes={routes} history={browserHistory}/>

3.  Router

低版本使用 Router，现在推荐使用下面几个 routers

• <BrowserRouter>
• <HashRouter>
• <MemoryRouter>
• <NativeRouter>
• <StaticRouter>

4.   Route

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

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

路径是 / 则UI规则如下:

<div>
  <Home/>
  <!-- react-empty: 2 -->
</div>

如果路径是 /news 则 UI 规则将是:

<div>
  <!-- react-empty: 1 -->
  <NewsFeed/>
</div>

<Route path="inbox" component={Inbox}>
   <Route path="messages/:id" component={Message} />
</Route>

<Route path="/hello/:name">// 匹配 /hello/michael// 匹配 /hello/ryan 
<Route path="/hello(/:name)">// 匹配 /hello// 匹配 /hello/michael// 匹配 /hello/ryan 
<Route path="/files/*.*">// 匹配 /files/hello.jpg// 匹配 /files/hello.html 
<Route path="/files/*">// 匹配 /files/ // 匹配 /files/a// 匹配 /files/a/b 
<Route path="/**/*.jpg">// 匹配 /files/hello.jpg// 匹配 /files/path/to/file.jpg

exact:true strict:true

sensitive: bool 判断大小写

5.  Switch

有时，我们只想加载一个 <Route>. 当我们加载 /about 我们不想匹配 /:user(后者显示 “404”页面). 例如:

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

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

6.     Redirect

<Route path="inbox" component={Inbox}>

  ＜Redirect to="/messages/:id" />

</Route>

现在访问/inbox/ 会自动跳转到/messages/5。

在 Switch 中才使用 from

<Switch>
  <Redirect from='/old-path' to='/new-path'/>
  <Route path='/new-path' component={Place}/>
</Switch>

7.   link

Link组件用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由

render() {
  return <div>
    <ul role="nav">
      <Link to="/about"}>About</Link>
      <Link to="/repos"}>Repos</Link>
    </ul>
  </div>
}

replace设置为 true, 点击这个 link 将会用新路径替换历史记录中的当前路径。

<Link to="/courses" replace />

NavLink

是一种特殊的 link，可用添加样式

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

<NavLink to="/faq" activeStyle={{ fontWeight: 'bold', color: 'red' }} >FAQs</NavLink>

8.     history

• length – (number) 条目数
• action – (string) 当前action (PUSH, REPLACE, or POP)
• location – (object) 当前 location. 以下属性:
  • pathname – (string) URL 路径
  • search – (string) The URL query string
  • hash – (string) The URL hash fragment
  • state – (object) location-specific state that was provided to e.g. push(path, state) when this location was pushed onto the stack. 只在 browser 和 memory history 可用.
• push(path, [state]) – (function) Pushes 一个新路径进入 history stack
• replace(path, [state]) – (function) 替换在 history stack 中的当前路径
• go(n) – (function) 在 history stack 中通过 n 个条目数来移动指针
• goBack() – (function) go(-1)
• goForward() – (function) go(1)
• block(prompt) – (function) Prevents navigation (see the history docs)

history 是可变的，推荐使用 this.props.location 代替使用 this.props.history.location

9.  match

• params – (object) Key/value 对
• isExact – (boolean) true
• path – (string) 创建嵌套<Route>s 时使用
• url – (string) 创建嵌套<Link>s 时使用

访问到 match 的方法：

• Route component as this.props.match
• Route render as ({ match }) => ()
• Route children as ({ match }) => ()
• withRouter as this.props.match
• matchPath as the return value