react-router5.x 的使用及配置

在 React router 中通常使用的组件有三种：

• 路由组件（作为根组件）: BrowserRouter（history模式） 和 HashRouter（hash模式）
• 路径匹配组件: Route 和 Switch
• 导航组件: Link 和 NavLink

关于路由组件，如果我们的应用有服务器响应web的请求，建议使用<BrowserRouter>组件; 如果使用静态文件服务器，建议使用<HashRouter>组件

1. 安装

npm install react-router-dom

2. 实例

import React, { Component, Fragment } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter, Route } from 'react-router-dom';
import store from './store';
import Header from './common/header';
import Home from './pages/home';
import Detail from './pages/detail';
import Login from './pages/login';


class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Fragment>
          <BrowserRouter>
            <div>
              <Header />
              <Route path='/' exact component={Home}></Route>
              <Route path='/login' exact component={Login}></Route>
              <Route path='/detail/:id' exact component={Detail}></Route>
            </div>
          </BrowserRouter>
        </Fragment>
      </Provider>
    )
  }
}

export default App;

3. 路由组件 BrowserRouter 和 HashRouter

BrowserRouter（history模式） 和 HashRouter（hash模式）作为路由配置的最外层容器，是两种不同的模式，可根据需要选择。

history 模式：

class App extends Component {
  render() {
    return (
      <BrowserRouter>
          <Header />
          <Route path='/' exact component={Home}></Route>
          <Route path='/login' exact component={Login}></Route>
          <Route path='/detail/:id' exact component={Detail}></Route>
      </BrowserRouter>
    )
  }
}

hash 模式：

class App extends Component {
  render() {
    return (
      <HashRouter>
          <Header />
          <Route path='/' exact component={Home}></Route>
          <Route path='/login' exact component={Login}></Route>
          <Route path='/detail/:id' exact component={Detail}></Route>
      </HashRouter>
    )
  }
}

4. 路径匹配组件: Route 和 Switch

Route: 用来控制路径对应显示的组件

有以下几个参数：

• path：指定路由跳转路径
• exact: 精确匹配路由
• component：路由对应的组件
• render： 通过写render函数返回具体的dom，而不需要去设置component

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

• location: 将 与当前历史记录位置以外的位置相匹配，则此功能在路由过渡动效中非常有用
• sensitive：是否区分路由大小写
• strict: 是否配置路由后面的 ‘/‘

Switch

渲染与该地址匹配的第一个子节点 或者 。

5. 导航组件: Link 和 NavLink

Link 和 NavLink 都可以用来指定路由跳转，NavLink 的可选参数更多。

Link

两种配置方式：

通过字符串执行跳转路由

<Link to='/login'>
    <span>登录</span>
</Link>

通过对象指定跳转路由

• pathname: 表示要链接到的路径的字符串。
• search: 表示查询参数的字符串形式。
• hash: 放入网址的 hash，例如 #a-hash。
• state: 状态持续到 location。

<Link to={{
        pathname: '/login',
        search: '?name=cedric',
        hash: '#someHash',
        state: { fromDashboard: true }
    }}>
    <span>登录</span>
</Link>

NavLink

可以看做 一个特殊版本的 Link，当它与当前 URL 匹配时，为其渲染元素添加样式属性。

<Link to='/login' activeClassName="selected">
    <span>登录</span>
</Link>

<NavLink
  to="/login"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>
    <span>登录</span>
</NavLink>

• exact: 如果为 true，则仅在位置完全匹配时才应用 active 的类/样式。
• strict: 当为 true，要考虑位置是否匹配当前的URL时，pathname 尾部的斜线要考虑在内。
• location 接收一个location对象，当url满足这个对象的条件才会跳转
• isActive: 接收一个回调函数，只有当 active 状态变化时才能触发，如果返回false则跳转失败

const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
  to="/login"
  isActive={oddEvent}
>login</NavLink>

6. Redirect

将导航到一个新的地址。即重定向。常在用户是否登录：

class Center extends PureComponent {
    render() {
        const { loginStatus } = this.props;
        if (loginStatus) {
            return (
                <div>个人中心</div>
            )
        } else {
            return <Redirect to='/login' />
        }
    }
}

也可使用对象形式：

<Redirect
  to={{
    pathname: "/login",
    search: "?utm=your+face",
    state: { referrer: currentLocation }
  }}
/>

7. withRouter

withRouter 可以将一个非路由组件包裹为路由组件，使这个非路由组件也能访问到当前路由的match, location, history对象。

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

class Detail extends Component {
    render() {
        ··· ···
    } 
}
 
const mapStateToProps = (state) => {
    return {
        ··· ···
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        ··· ···
    }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail));

8. 打包部署的路由配置

项目执行npm run build后，将打包后的build文件当大 Nginx 配置中。

如果 react-router 路由 使用了 history 模式（即），那么在 Nginx 配置中必须加上:

location / {
        ··· ···
        try_files $uri /index.html;
        ··· ···
        }
    }

如果 react-router 路由 使用了 hash 模式(即)，那么在 Nginx 中不需要上面的配置。

react-router5.x 的使用及配置

原文：https://www.cnblogs.com/cckui/p/11490372.html