react-router4

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>