React-Router

[Wscats]

参考文档

React-router英文文档 初探 React Router 4.0 React-router中文文档

安装

npm install react-dom
npm install react-router-dom

DEMO如下

var React = require('react');
var ReactDom = require('react-dom');
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
//先获取组件(创建组件)再使用
var AppComponent = require('./components/productBox.jsx');
var Wscats = require('./components/wscats.jsx');

ReactDom.render((
  <Router>
    {/*rouer只能有一个子标签，所以用div包起来*/}
    <div>
      <ul>
        <li>
          <Link to="/">/</Link>
        </li>
        <li>
          <Link to="/index">index</Link>
        </li>
      </ul>
      <Route exact path="/" component={AppComponent}/>
      <Route path="/index" component={Wscats}/>
    </div>
  </Router>
), document.getElementById('content'))

引用	作用
react-router	React Router 核心
react-router-dom	用于DOM绑定的React Router
react-router-native	用于React Native的React Router
react-router-redux	React Router和Redux的集成
react-router-config	静态路由配置的小助手

react-router和react-router-dom的区别

在React的使用中，我们一般要引入两个包，react 和react-dom，react-router和react-router-dom并不是两个都要引用的 他们两个只要引用一个就行了，不同之处就是后者比前者多出了<Link><BrowserRouter>这样的 DOM 类组件。 因此我们只需引用react-router-dom这个包就行了。当然，如果搭配 redux，你还需要使用react-router-redux或者react-redux

路由传参

状态	方式
Route component	以this.props.match方式
Route render	以({ match })=>()方式
Route children	以({ match })=>()方式
withRouter	以this.props.match方式

BrowserRouter和HashRouter的区别

react-router4的文档用的是BrowserRouter，BroswerRouter是需要服务端配合的，服务端重定向到首页，BrowserRouter是基于html5的pushState和replaceState的，很多浏览器不支持，存在兼容性问题。所以新手推荐使用HashRouter

BrowserRouter

BrowserRouter在不兼容的浏览器上会有诸多问题，比如路由嵌套的时候刷新页面空白无法直接进入嵌套路由，路由跳转也有可能不成功

import {BrowserRouter as Router, Route, Link, Redirect} from 'react-router-dom'
import {createBrowserHistory} from 'history'
const history = createBrowserHistory()
<Router history={history}>
//code
</Router>
//后面就可以使用history.push('/wscats');跳转地址为 url+/wscats

HashRouter

import {HashRouter, Route, Link, Redirect} from 'react-router-dom'
import {createHashHistory} from 'history'
const history = createHashHistory()
<HashRouter history={history}>
//code
</HashRouter>
//后面就可以使用history.push('/wscats');跳转地址为 url+#/wscats

路由嵌套

父路由要这么写

<Provider store={store}>
    <Router>
        <div>
            <Route path="/" exact component={Whome} />
            <Route path="/home" component={Whome} />
            <Route path="/detail/" component={Wdetail} />
        </div>
    </Router>
</Provider>

子路由，嵌套路由/home/hot，记得加上/home

<Route path="/home/hot" component={Wchanel}  />
<Route path="/home/fresh" component={Wchanel}  />