react学习之路2：react路由相关知识

上次介绍了react简单路由的配置方法，这次介绍一些路由知识
，同时与学过的vue的相关知识进行一些类比

1. hashrouter和browserrouter
   这是两种路由模式，对应着vue-router中的hash模式和history模式，hash路由和history路由的原理大家可以百度一下。使用方法参考如下

import {HashRouter ,BrowserRouter, Route} from 'react-router-dom';
ReactDOM.render(
  <HashRouter>
    <div>
    <Provider store = {store}>
      <Nav />
      <Route exact path="/" component={App} />
      <Route path="/pageA" component={pageA} />
      <Route path="/pageB" component={pageB} />
      <Route path="/number" component={number} />
    </Provider>
    </div>
  </HashRouter>,
  document.getElementById('root')
);

ReactDOM.render(
  <BrowserRouter>
    <div>
    <Provider store = {store}>
      <Nav />
      <Route exact path="/" component={App} />
      <Route path="/pageA" component={pageA} />
      <Route path="/pageB" component={pageB} />
      <Route path="/number" component={number} />
    </Provider>
    </div>
  </BrowserRouter>,
  document.getElementById('root')
);

2. Switch组件
   作用：渲染第一个被location匹配到的并且作为子元素的Route或者Redirect
   先看代码例子

  <HashRouter>
    <div>
    <Provider store = {store}>
      <Nav />
      <Route exact path="/" component={App} />
      <Route path="/pageA" component={pageA} />
      <Route path="/:page" component={pageB} />
      <Route path="/number" component={number} />
    </Provider>
    </div>
  </HashRouter>

在不使用Switch组件，如果我们当前路由为/pageA，我们会匹配到/pageA和/:page两个路由，结果就是在页面上pageA，和pageB组件都被我们渲染。这样很明显是不符合实际需求的，我们加上Switch组件试试看

<HashRouter>
    <div>
    <Provider store = {store}>
      <Nav />
      <Switch>
      <Route exact path="/" component={App} />
      <Route path="/pageA" component={pageA} />
      <Route path="/:page" component={pageB} />
      <Route path="/number" component={number} />
      </Switch>
    </Provider>
    </div>
  </HashRouter>

这里我们会发现问题解决了，/pageA只显示pageA，这是因为Switch渲染第一个被location匹配到的path，所以后续的匹配都不渲染了。

3. exact
   exact代表当前路由path的路径采用精确匹配，我们通常会为path=’/'这个路径添加exact，精准匹配。另外需要注意一点的是嵌套路由不要加exact属性，否则下面的子路由将不会生效，因为外层强制匹配了。

4. Redirect重定向
   Redirect路由重定向：在Switch里识别不到路径时，都会重定向到指定的路径

 <HashRouter>
    <div>
    <Provider store = {store}>
      <Nav />
      <Switch>
      <Route exact path="/" component={App} />
      <Route path="/page" component={pageB} />
      <Route path="/pageA" component={pageA} />
      <Route path="/number" component={number} />
      <Redirect  to="/" />
      </Switch>
    </Provider>
    </div>
  </HashRouter>

Redirect 需要放在Switch的最后使用

5. 路由通过params传参
   路由表中配置：

<Route path=' /app/:id '   component={app}></Route>

在line传参

 <Link to={ ' /app/ ' + ' 123 ' } activeClassName='active'>XXXX</Link>    

JS方式传参

 this.props.history.push(  '/app/'+'123'  )

组件中接收传参

 this.props.match.params.id 

6. 通过query传参（不需要配置路由表）
   使用Link

 <Link to={{ path : ' /app' , query : { id: '123' }}}>

js：

  this.props.history.push({ path : '/app' ,query : { id: '123''} })

页面取参：

this.props.location.query.id

7. 通过state传参（加密）

使用Link

 <Link to={{ path : ' /app' , state : { id: '123' }}}>

js：

  this.props.history.push({ path : '/app' ,state : { id: '123''} })

页面取参：

this.props.location.state .id