你不知道的 React Router 4

React Router V4的设计思想：一切皆组件(v3 到 v4需要思维方式的转变)

动态路由方式

在V3版本中，我们直接通过browserHistory.push的方法来进行动态的路由的跳转即可，但是在V4版本中，我们就不能这么用了，而必须要通过 withRouter高阶组件 的方式去进行路由的跳转。

// V4
import React from "react";
import {withRouter} from "react-router-dom";

class MyComponent extends React.Component {
  ...
  myFunction() {
    this.props.history.push("/some/Path");
  }
  ...
}
export default withRouter(MyComponent);

一个实际需求

假设现在需要有三个路由，一个登陆，一个首页，一个创建订单，登录页面是一个单独的页面，没有和其他页面共有任何组件，首页和创建订单页共有Header Nav等组件，只有页面的大肚子中间部分是内容不同的。那么要保证在首页和订单页切换的过程中，确保Header Nav等公共组件的不会重新卸载和挂载。

// routers.js
// ...
 <Router>
   <Switch>
       <Route path="/index" component={App} />
       <Route exact path="/login" component={Login} />
       <Redirect from="/" to="/index" />
   </Switch>
 </Router>
// ...

// App.js
// ...
class App extends Component {
  render() {
    const user = this.props.user
    return (
      <div className="App">
        <Header 
          user={user}
        />
        <Nav />
       <Switch>
          <Route exact path="/index/create" render={() => <div>创建项目</div>}></Route>
          <Route render={() => <div>首页</div>}></Route>
       </Switch>
      </div>
    )
  }
}
// ...

Exclusive Routing

中匹配的路由只会渲染第一个匹配的路由对应的UI,且只会渲染一个UI, 若要精确匹配仍然需要给每个路由加上exact属性

Match

props.match 可以帮我们获取路由参数和 routes
match 对象为我们提供了 match.params，match.path，和 match.url 等属性

match.path vs match.url