react router

官方文档 https://react-router.docschina.org/web/guides/quick-start

history 对象是可变的，所以咱们建议从 <Route> 的渲染选项中来访问 location，而不是从 history.location 直接获取。这样作能够保证 React 在生命周期中的钩子函数正常执行，例如：

// locationChanged 将为 true
const locationChanged = nextProps.location !== this.props.location

// INCORRECT，由于 history 是可变的因此 locationChanged 将一直为 false
const locationChanged = nextProps.history.location !== this.props.history.location

 

使用总结 https://www.cnblogs.com/V587Chinese/p/11507836.html

BrowserRouter和HashRouter
这二者能够理解为路由的做用域，全部的Link组件和Route组件都必须在其内部。两者区别在于：

• BrowserRouter中的URL指向真实的url，当页面刷新（或直接操做url并回车）时，将产生指向该路径的url请求，若是服务器端没有配置该路径，则返回404。
• HashRouter中#后面的uri并非真实的请求路径，对于后端来讲，全都指向同一个地址。另外哈希历史记录不支持loaction.key和loaction.state，当经过state传递参数的时候，没法从历史记录中获取到，可能会致使页面显示异常。
• 也就是说在浏览器地址栏中直接输入 http://test.code.com/aboutBrowserRouter会匹配不了而报404（由于服务端nginx中只配置了test.code.com，BrowserRouter代码中的路由并不会被服务端识别），而 http://test.code.com/#/aboutHashRouter会正常显示about页面（由于访问的后端地址仅仅是test.code.com）。

在BrowserRouter模式下，如何在服务端配置呢？

• Nginx配置（前端项目打包），将任何URL访问都指向index.html
• 后端服务配置（前端项目打包），将任何URL访问都指向index.html
• 开启前端服务（须要进行Nginx反向代理）

Link标签和a标签，看到的效果是同样的，但咱们推荐<Link>，使用它才是单页面应用，浏览器不会请求页面；而使用a标签，会从新请求页面。

导航守卫的实现（权限校验）

NavLink 和  PureComponent 一块儿使用的时激活连接样式不生效 https://www.cnblogs.com/wenruo/p/10321456.html

v4 v3区别及策略 https://zhuanlan.zhihu.com/p/28585911

一、嵌套布局

const PrimaryLayout = props => {
  return (
    <div className="primary-layout">
      <PrimaryHeader />
      <main>
        <Switch>
          <Route path="/" exact component={HomePage} />
          <Route path="/user" component={UserSubLayout} />
          <Route path="/products" component={ProductSubLayout} />
          <Redirect to="/" />
        </Switch>
      </main>
    </div>
  );
};

const UserSubLayout = () =>
  <div className="user-sub-layout">
    <aside>
      <UserNav />
    </aside>
    <div className="primary-content">
      <Switch>
        <Route path="/user" exact component={BrowseUsersPage} />
        <Route path="/user/:userId" component={UserProfilePage} />
      </Switch>
    </div>
  </div>;

const UserSubLayout2 = props =>
  <div className="user-sub-layout">
    <aside>
      <UserNav />
    </aside>
    <div className="primary-content">
      <Switch>
        <Route path={props.match.path} exact component={BrowseUsersPage} />
        <Route
          path={`${props.match.path}/:userId`}
          component={UserProfilePage}
        />
      </Switch>
    </div>
  </div>;

const UserSubLayou3 = ({ match }) => <div className="user-sub-layout"> <aside> <UserNav /> </aside> <div className="primary-content"> <Switch> <Route exact path={match.path} component={BrowseUsersPage} /> <Route path={`${match.path}/add`} component={AddUserPage} /> <Route path={`${match.path}/:userId/edit`} component={EditUserPage} /> <Route path={`${match.path}/:userId`} component={UserProfilePage} />
 <Route component={NoMatch} /> </Switch> </div> </div>;
// 注意上面的route顺序，由于switch只匹配一个，须要将更精确的放到前面。另外一种方式是每个route都加exact精确匹配。

咱们用 2 个 routes 替换以前的 4 个 routes
注意，这里咱们没有再使用 exact，由于，咱们但愿 /user 能够匹配任何以 /user 开始的 route，products 同理。
使用这种策略，子布局也开始承担起了渲染 routes 的责任。避免两个 user组件页面中都有一个<UserNav />的重复渲染问题。

有一点值得注意的是，routes 须要识别它的完整路径才能匹配，为了减小咱们的重复输入，咱们可使用 props.match.path来代替。match.url 是浏览器 URL 的一部分，match.path 是咱们为 router 书写的路径

二、Authorized Route 路由权限控制

在应用程序中限制未登陆的用户访问某些路由是很是常见的，还有对于受权和未受权的用户 UI 也可能大不同，为了解决这样的需求，咱们能够考虑为应用程序设置一个主入口，如/auth表示有权限相关操做，/app表示业务操做。
如今，咱们首先会去选择应用程序在哪一个顶级布局中，好比，/auth/login 和 /auth/forgot-password 确定在 UnauthorizedLayout 中，另外，当用户登录时，咱们将判断全部的路径都有一个 /app 前缀以确保是否登陆。若是用户访问 /app 开头的页面但并无登陆，咱们将会重定向到登陆页面。示例：

class App extends React.Component {
  render() {
    return (< Provider store={
      store
    } > <BrowserRouter > <Switch > <Route path="/auth" component={
      UnauthorizedLayout
    }
    />
      <AuthorizedRoute path="/app " component={PrimaryLayout} />
    </Switch>
      </BrowserRouter>
    </Provider>
    )
  }
}

class AuthorizedRoute extends React.Component {
  componentWillMount() {
    getLoggedUser();
  }

  render() {
    const { component: Component, pending, logged, ...rest } = this.props;
    return (
      <Route
        {...rest}
        render={props => {
          if (pending) return <div>Loading...</div>;
          return logged
            ? <Component {...this.props} />
            : <Redirect to=" / auth / login " />;
        }}
      />
    );
  }
}

const stateToProps = ({ loggedUserState }) => ({
  pending: loggedUserState.pending,
  logged: loggedUserState.logged
});

export default connect(stateToProps)(AuthorizedRoute);

另外可参考：导航守卫的实现