React-router4

1. 基础使用

安装

yarn add react-router-dom -S

基本使用

• BrowserRouter 包裹整个应用
• Router路由对应渲染的组件，可嵌套
• Link跳转专用

import { BrowserRouter, Route, Link } from 'react-router-dom'ReactDOM.render(  <BrowserRouter>    <div>      <ul>        <li>          <Link to='/'>首页</Link>        </li>        <li>        <Link to='me'>Me</Link>        </li>        <li>          <Link to='more'>More</Link>        </li>      </ul>      <Route path='/' exact component={App}></Route>      <Route path='/me' component={Me}></Route>      <Route path='/more' component={More}></Route>    </div>  </BrowserRouter>, document.getElementById('root'))

参数exact是完全匹配，否则/me也会匹配到/

2.其他组件

• url参数，Route组件参数可用冒号标识参数
• Redirect组件跳转
• Switch只渲染一个子Route组件

url参数

<Route path='/:location' component={Test}></Route>

// Test组件class Test extends React.Component{  render () {    return <h2>测试{this.props.match.params.location}</h2>  }}

Redirect组件跳转

<Redirect to='/me'></Redirect>

Switch只渲染一个子Route组件

若路由为123，则匹配最后一个组件

<Switch>  <Route path='/' exact component={App}></Route>  <Route path='/me' component={Me}></Route>  <Route path='/more' component={More}></Route>  <Route path='/:location' component={Test}></Route></Switch>