【10】react 之 react-router

1.1.  路由

路由：URL与处理器的映射。

浏览器当前的 URL 发生变化时，路由系统会做出一些响应，用来保证用户界面与 URL 的同步。

1.2.  Router安装

npm i react-router -save

1.3.  Router使用

路由器Router就是React的一个组件，所以使用方式跟React组件使用方式一样。

import {Router ,Route,hashHistory} from 'react-router';
ReactDOM.render(<Router/>,document.getElementById('app'));

Router组件本身只是一个容器，真正的东西（路由）要通过Route组件定义。

import React from 'react';
import ReactDOM from 'react-dom';
import {Router,Route,hashHistory} from 'react-router';
import Home from './components/home';
import About from './components/about';
 
ReactDOM.render(
　　<Router history={hashHistory}>
      <Route path='/about'  component={About}/>
  </Router>,
document.getElementById('app')
);

Router: 路由器对象

history=hashHistoryRouter路由采用hash方式监听地址栏变化，并将URL解析（#后面的内容）为位置对象，路由器可以使用该位置对象（#后面的内容）来匹配路由并呈现正确的组件集。

http://localhost:8000/#/home  <Route path='/home'  component={Home}  />

http://localhost:8000/#/about  <Route path='/about'  component={About}  />

Route ：路由对象

path ：路径

component 显示的组件

1.4.  Router嵌套

一个应用由多个组件构成，复杂的应用中，可能存在嵌套的问题。嵌套路由非常简单，你只需要做两件事情：

1、Route中配置嵌套的Route；

render((
    <Router history={ hashHistory }>
        <Route path="/" component={ App }>
            <Route path="select" component={ Select }></Route>
            <Route path="found" component={ Found }></Route>
            <Route path="follow" component={ Follow }></Route>
            <Route path="my" component={ My }>
                <Route path=":myname" component={ MyName }></Route>
                <Route path="mysex" component={ MySex }></Route>
            </Route>
        </Route>
    </Router>
), document.getElementById('root'));

　　

2、嵌套Route的父组件中使用{this.props.children}渲染子Route的组件即可；

import React from 'react';
import ReactDOM from 'react-dom';
import {Router,Route,hashHistory} from 'react-router';
import App from './components/App'
import Home from './components/home';
import About from './components/about';
 
ReactDOM.render(
  <Router history={hashHistory}>
    <Route path='/'  component={App} >
        <Route path='home' component={Home}/>
        <Route path='about' component={About}/>
      </Route>
         </Router>,
         document.getElementById('app')
);

Route / 中嵌套了”/home”和”/about”两个路由。

App.js

import React,{Component} from 'react';
class App extends Component{
         render(){
          return (<div>
                      <nav>
                        <ul>
                        <li><a href='#/home'>首页</a></li>
                        <li><a href='#/about'>关于我们</a></li></ul>
                       </nav>
                            <main>{this.props.children} //显示嵌套路由的组件</main>
                         </div>
 
                   );
         }
}
 
export default App;

App组件的this.props.children属性就是子组件。

1.4.1.   补充

子路由也可以不写在Router组件里面，单独传入Router组件的routes属性。

var routes = <Route path="/" component={App}>
 
  <Route path="home" component={Home}/>
 
  <Route path="about" component={About}/>
 
</Route>;
 
<Router routes={routes} history={hashHistory}/>

Route可以无限级的嵌套，只需要遵循响应结构即可，另外不要忘记在嵌套Route的父组件中使用{this.props.children}显示子路由组件。

1.5.  path 属性

Route组件的path属性指定路由的匹配规则。如果未提供，路由器将尝试匹配子路由。

注意点：它将与父路由的路径相连，除非它以/开头，使其成为绝对路径。

<Route path='/'  component={App} >
 
          <Route path='home' component={Home}/>
 
          <Route path='about' component={About}/>
 
</Route>

1.5.1.   路径参数

URL参数：地址中可以传入参数，采用:paramName

<Route path='users/:userId' component={User}/>

路径中参数都会传入到组件，可以通过this.props.routeParams获取，比如获取userId,this.props.routeParams.userId。

1.6.  IndexRoute组件

<Router history={hashHistory}>
   <Route path='/'  component={App} >
      <Route path='home' component={Home}/>
      <Route path='about' component={About}/>
 </Route>
</Router>

配置了一个嵌套路径，但是访问“/”的时候，你会发现只有App组件本身的内容，只有一个导航菜单，可能我们想默认进入首页的时候就显示Home子组件，那么我们就需要IndexRoute。

IndexRoute：设置默认显示的子组件。

 import {IndexRoute} from 'react-router';
 
<Router history={hashHistory}>
 
   <Route path='/'  component={App} >
 
      <IndexRoute component={Home} /><Route path='home' component={Home}/>
 
      <Route path='about' component={About}/>
 
</Route>
 
</Router>

IndexRoute 把{Home}组件设置为默认加载显示的子组件，及路径为“/”,那么Route /home就可以删除了，然后把导航的路径修改为“#/”即可。

<li><a href='#/home'>首页</a></li>
 
<li><a href='#/'>首页</a></li>

1.7.  IndexRedirect 组件(了解)

IndexRedirect组件用于访问根路由的时候，将用户重定向到某个子路由。浏览器地址将会改变为”#/home”.

import {IndexRedirect} from 'react-router';
 
<Route path="/" component={App}>
 
  ＜IndexRedirect to="home" />
 
  <Route path="home" component={Home} />
 
  <Route path="about" component={About} />
 
</Route>

上面代码中，用户访问根路径时，将自动重定向到子组件Home。

1.8.  Link 链接

Link组件用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是<a>元素的React 版本，可以接收Router的状态。

<ul>
         <li><a href='#/'>首页</a></li>
         <li><a href='#/about'>关于我们</a></li>
</ul>

与上面等价

import {Link} from 'react-router';
<ul>
         <li><Link to='/'>首页</Link></li>
         <li><Link to='about'>关于我们</Link></li>
</ul>

如果希望当前的路由与其他路由有不同样式，这时可以使用Link组件的activeStyle或activeClassName属性。

<li><Link to='/'  activeStyle={{color:'orange'}} onlyActiveOnIndex={true}>首页</Link></li>
 
<li><Link to='about' activeStyle={{color:'orange'}}>关于我们</Link></li>

上面代码中，当前页面的链接的style会包含color:’orange’。

<ul>
         <li><Link to='/' activeClassName='active' onlyActiveOnIndex={true}>首页</Link></li>
         <li><Link to='/about' activeClassName='active'>关于我们</Link></li>
</ul>　

上面代码中，当前页面的链接的class会包含active。

onlyActiveOnIndex ：如果为true,当前路径必须与路由路径完全匹配才为活动状态。默认为false,如果子路径为活动状态那么父路径也为活动，因为子路由路径总是包含父路由路径。

除了使用a、link标签之外导航到路由页面，也可以使用props中router对象,该属性是由路由器传入。

this.props.router.push("/about");

1.9.  IndexLink 链接

如果链接到根路由/，不要使用Link组件，而要使用IndexLink组件。

这是因为对于根路由来说，activeStyle和activeClassName会失效，或者说总是生效，因为/会匹配任何子路由。而IndexLink组件会使用路径的精确匹配等效于<Link onlyActiveOnIndex={true}>。

<IndexLink to="/" activeClassName="active">首页</IndexLink>

1.10.  路由的回调

路由有三个回调函数：

onEnter(nextState, replace, callback?) 进入该路由时调用

onChange(prevState, nextState, replace, callback?) 当路由位置改变时调用，但路由本身不进入或离开。 例如，当路由的子项更改时，或当查询参数更改时，将调用此方法。

onLeave(prevState) 离开该路由时调用

<Route path='/about' component={About} onEnter={()=>{alert('你来了')}} onLeave={()=>{alert('你走了');}}/>

1.11.   异步路由

路由可以通过采用异步的方式加载组件，从而达到按需加载的目的，大大提供了程序的运行速度。

实现异步路由，提供getComponent(nextState, callback)即可：

function asyncGetComponent(nextState, cb){
     //异步加载
         require.ensure([], function (require) {
 
      //回调告诉路由器已经加载完毕
 
      //null:没有错误
 
      //require('./components/Async').default
 
      cb(null, require('./components/Async').default)
 
   });
 
}
<Route path='async' getComponent={asyncGetComponent} />

1.12.  histroy 属性

Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。

history属性，一共可以设置三种值。

browserHistory

hashHistory(#)

createMemoryHistory

如果设为hashHistory，路由将通过URL的hash部分（#）切换，URL的形式类似localhost/#/about。

import { hashHistory } from 'react-router'
 
render(
 
  <Router history={hashHistory} routes={routes} />,
 
  document.getElementById('app')
 
) 

如果设为browserHistory，浏览器的路由就不再通过hash完成了，而显示正常的路径localhsot/about，背后调用的是浏览器的History API。

import { browserHistory } from 'react-router'
 
render(
 
  <Router history={browserHistory} routes={routes} />,
 
  document.getElementById('app')
 
)

但是，这种情况需要对服务器改造。否则用户直接向服务器请求某个子路由，会显示网页找不到的404错误。

如果开发服务器使用的是webpack-dev-server，加上--history-api-fallback参数就可以了。

$ webpack-dev-server --inline --content-base . --history-api-fallback

createMemoryHistory主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动。

const history = createMemoryHistory(location)