CreateReactApp+ReactRouter4的使用

路由基础介绍
1，什么是前端路由？

路由是根据不同的 url 地址展示不同的内容或页面

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。

2，前端路由有什么优点和缺点？

优点

用户体验好，不需要每次都从服务器全部获取，快速展现给用户

缺点

使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存

单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

我们使用create-react-app搭建的项目https://blog.csdn.net/github_squad/article/details/57452333

准备工作：安装react-router-dom
npm install react-router-dom --save // --save 会把依赖包名称添加到 package.json 文件 dependencies 键下,运行时依赖

开始写react-router啦
以下代码，完全复制于 https://reacttraining.com/react-router/web/example/basic

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const BasicExample = () => (
  <Router>     // 创建一个路由
    <div>
      <ul>  // Link 组件 相当于a标签，to属性相当于a标签中的href，可以打开控制台看到，
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>
      // 监听路由，地址栏的变化，，很抱歉exact的意思我现在都不知道，观察到exact 在跟路由下，和exact={activeOnlyWhenExact}
      <Route exact path="/" component={Home}/>  // 如果地址栏访问了跟路径，比如http://localhost:5005/  就会去渲染<Home /> 组件
      <Route path="/about" component={About}/>  // 如果地址栏访问了/about 路径，比如http://localhost:5005/about  就会去渲染<About/> 组件
      <Route path="/topics" component={Topics}/> // 如果地址栏访问了topics 路径，比如http://localhost:5005/topics  就会去渲染<Topics/> 组件
    </div>
  </Router>
)

3.动态路由

首先讲一下模糊匹配

image.png

const ParamsExample = () => (
  <Router>   // 在<Router>组件中，可以任意的写标签写布局，很嚣张。。
    <div>
      <h2>Accounts</h2>
      <ul>
        <li><Link to="/netflix">Netflix</Link></li>  // 同样，写了布局，又写了a标签
        <li><Link to="/zillow-group">Zillow Group</Link></li>
        <li><Link to="/yahoo">Yahoo</Link></li>
        <li><Link to="/modus-create">Modus Create</Link></li>
      </ul>

      <Route path="/:id" component={Child}/>  // 定义路由，现在想来，这是用地址栏传参啊
      // path里面的值是<Link>组件中的to的值，，，这个写法有些奇怪，/:id
      // 原来由路由渲染的组件都会自动的往组件中传递一个参数，这个参数包含了路由信息
      // 而:id 是一种官方规定的写法，阮一峰老师的文章里是说 这是通配符，，
      // http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu

    </div>
  </Router>
)
// 
// 这里的 { match } 相当于 parameter.match  不懂的话看ES6就懂了 
const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

4.嵌套路由

react-router-dom 又一个新属性 Switch

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect
} from 'react-router-dom'

const NoMatchExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/old-match">Old Match, to be redirected</Link></li>
        <li><Link to="/will-match">Will Match</Link></li>
        <li><Link to="/will-not-match">Will Not Match</Link></li>
        <li><Link to="/also/will/not/match">Also Will Not Match</Link></li>
      </ul>
      <Switch>
        <Route path="/" exact component={Home}/>
        <Redirect from="/old-match" to="/will-match"/>
        <Route path="/will-match" component={WillMatch}/>
        <Route component={NoMatch}/>       // 所有没有定义的路由都会匹配NoMatch组件
      </Switch>
    </div>
  </Router>
)

const Home = () => (
  <p>
    A <code>&lt;Switch></code> renders the
    first child <code>&lt;Route></code> that
    matches. A <code>&lt;Route></code> with
    no <code>path</code> always matches.
  </p>
)

const WillMatch = () => <h3>Matched!</h3>

const NoMatch = ({ location }) => (
  <div>
    <h3>No match for <code>{location.pathname}</code></h3>
  </div>
)

export default NoMatchExample

5.路由传参
this.props.history.push({pathname :"/device/list",query:{data:item})

接受参数 this.props.location.query.data