react路由管理

在进行react项目开发时，少不了的就是对路由进行管理。其中，单页面应用所不同的特点是：路由所指，其实就是对应不同的组件。

路由模式：

1、BrowserRouter：浏览器的路由方式，使用浏览器中的History API用于处理URL。每次改变路由时，会向服务器发送请求，如果服务器未配置对应的路径指向对应的文件，会导致出现404的情况。所以在使用browserHistory需要再加一层服务器配置(node/nginx),让前端发送的请求映射到对应的html文件上。（推荐：就是好看，不解释）
2、HashRouter：在路径前加入#号成为一个哈希值，hash模式下，前端路由修改的是#中的信息，而浏览器请求时不会将 # 后面的数据发送到后台，只进行组件间切换。
3、MemoryRouter：不存储history，所有路由过程保存在内存里，不能进行前进后退，因为地址栏没有发生任何变化（没用过，具体不太清楚）

路由的应用：

import React from 'react';
import { HashRouter, Switch, Route, Redirect } from 'react-router-dom'
import Home from './page/home'
import Detail from './page/detail'
import Cart from './page/cart'

function App() {
  return (
    <div className="App">
      <HashRouter basename='/'>
        <Switch>
          <Route path='/' component={Home} />
          <Route path='/Detail' component={Detail} />
          <Route path='/Cart' component={Cart} />
          <Redirect to='/' /> // 重定向
        </Switch>
      </HashRouter>
    </div>
  );
}

export default App;

**basename：**项目打包后放在后端的前端代码都会使用nginx配置，配置后访问的路径会带一个项目名称。如http://192.168.1.6/mzc/Cart。此时这样访问的时候就需要在react框架内的router路由配置basename，为每个路由添加和nginx配置的项目名一样的根目录。本例中即为/mzc。
Switch:显示匹配到的第一个路由，上述内容中。地址栏切换为/Cart，实际显示为Home组件。是因为先匹配到"/"，再匹配到"/Cart"，所以只显示Home组件。对此需要加"exact"严格模式，如下：

function App() {
  return (
    <div className="App">
      <HashRouter basename='/'>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/Detail' component={Detail} />
          <Route path='/Cart' component={Cart} />
          <Redirect to='/' /> // 重定向
        </Switch>
      </HashRouter>
    </div>
  );
}

作用是实现精准匹配。

路由跳转和传参：

1、query形式

props.history.push({
            pathname: '/Home',
            query: {
                id: 'home'
            }
        })

接收数据

const id = props.location.query.id

刷新页面时数据丢失
2、state形式

props.history.push({
            pathname: '/Home',
            state: {
                id: 'home'
            }
        })

接收数据

const id = props.location.state.id

刷新页面时数据丢失
3、params传参
在路由配置需要传递的参数

<Route path='/Home/:id/:name?' component={Home} />

?表示此参数可以不传递，注意不确定的参数配置在后面。

props.history.push('/Home/abncdsv/小明')

接收参数

console.log('params', props.match.params)

刷新页面参数不会丢失，也是开发中常用方式。