react router 级联路由_React Router 路由原理和组件的使用

React 最初路由的原理是通过动态的给组件状态设置值显示或者隐藏组件来实现：

class App extends React.Component {
  state = {
    screen: 'list' // or about
  }
  render() {
    return(
    <div className='App'>
    {this.screen =='list' && <List />}
    {this.screen =='about' && <About />}
    </div>
    )
  }
}

React {}中其实就是表达式的部分， this.screen =='list' && <List />为短路写法，当第一个表达式的值为真的时候，返回第二个表达式的值。

我们通过给组件添加点击事件，动态更新组件的状态，实现所谓的路由。但是，当你回退的时候，页面并没回退到上一个路由的状态，React Router可以很好的解决这个问题。

安装 React Router

要在应用中使用 React Router 我们需要安装 react-router-dom

npm install --save react-router-dom

React Router 提供了两个不同的应用场景 react-router-native 和 react-router-dom，我们使用浏览器环境，所以使用dom包

BrowserRouter

BrowserRouter 将会监听 URL 的变化，当 URL 变更时，它将使浏览器显示相应的页面

使用

导入BrowserRouter ，使用<BrowserRouter>包含住<App>，将导入所有的其他组件以便更好的协作，并监听 URL，确保当 URL 变更时通知其他组件。

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <BrowserRouter><App /></BrowserRouter>, document.getElementById('root')
);

使用BrowserRouter时，其实真正的是在渲染Router组件并向其传递history属性，history库也是由React Training构建，目标是抽象化不同环境的区别，并提供最少的API来使你管理历史记录堆、导航、确认导航，并在会话之间保持状态。

总之，要使ReactRouter正常工作，需要将整个应用封装在 BrowserRouter组件中，BrowserRouter还会封装history库，使你的应用能够知道URL中的变化。

Link 组件

先导入Link组件，通过link组件传递to属性，告诉应用要路由到哪个部分，<Link>组件会渲染成拥有相应的href的锚点标签a，因此，它的行为和网络上的普通链接的行为一致。

import { Link } from 'react-router-dom';

// use
<Link to="/about">About</Link>

构造路由和传递更复杂的参数，可以向Link的to属性传递对象

<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}
  Courses
</Link>

Route 组件

Route 接受一个路径，将会匹配（也可能不匹配）当前的URL，如果路径匹配URL，则Router会渲染一些UI，不匹配则不会渲染，通过检查URL，来决定要渲染哪个组件，这也意味着，回退按钮也可以正常工作了。

import { Route } from 'react-route-dom';

<Route exact path='/' render={() =>(
  ...
)}

<Route path='/create' component={CreateContact}/>

exact标记时，只有完全匹配URL时路径才匹配。
所以，如果浏览器加载URL/houses/green下面的路径都会匹配：

<Route path="/houses" component={Houses} />

<Route path="/houses/green" component={Houses} />

<Route exact path="/houses/green" component={Houses} />

<Route path="/" component={Houses} />

资源

ReactTraining/history​github.com

React Router: Declarative Routing for React​reacttraining.com