点击重新加载按钮时,Reactjs重新加载当前路由,而不是整个应用程序

时间:2019-09-23 08:14:29

标签: reactjs react-router

我使用Switch有一个基本的反应路由器设置,如下所示:

import React from "react"
import {Route, Switch } from "react-router-dom"

import AuthenticatedRoute from "./components/AuthenticatedRoute"
import UnauthenticatedRoute from "./components/UnauthenticatedRoute"

import Home from './containers/Home'
import Login from './containers/Login'
import Books from './containers/Books'


import NotFound from './containers/NotFound'


export default ({ childProps }) => (
  <Switch>
    <AuthenticatedRoute path="/" exact component={Home} props={childProps} />
    <UnauthenticatedRoute path="/login" exact component={Login} props={childProps} />
    <AuthenticatedRoute path="/books" exact component={Books} props={childProps} />

    { /* Finally, catch all unmatched routes */ }
    <Route component={NotFound} />
  </Switch>
)

和AuthenticatedRoute模块,如:

import React from "react";
import { Route, Redirect } from "react-router-dom";

export default ({ component: C, props: cProps, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      cProps.isAuthenticated
        ? <C {...props} {...cProps} />
        : (
          <Redirect
            to="/login"
          />
)}
  />
)

现在,一切正常,但是,当我在/books路线上并按浏览器或 F5 上的重新加载按钮时,整个应用程序将刷新并从首页开始,我失去了当前的活动路线。

在重新加载时如何保留我的活动路线?

0 个答案:

没有答案