私有路由 React 路由器总是重定向到第一个路由

Question

实际上，通过单击按钮定向到另一条路线我没有问题，但不知何故，我无法通过更改 URL 手动定向。 每次我要更改 URL（例如：localhost:3000/proposal）时，它总是将我引导到第一个Route 。 这是按顺序排列的路线：

<Switch>
                  <Route exact path="/" component={Landing} /> // => always goin here
                  <Route exact path="/login" component={Login} />
                  <Route exact path="/register" component={Register} />

                  {/* Dashboard */}
                  <PrivateRoute
                    exact
                    path="/home"
                    component={Home}
                    StickyNav={StickyNavbar}
                  />
                  <PrivateRoute
                    exact
                    path="/proposal"
                    component={Proposal}
                    StickyNav={StickyNavbar}
                  />
                  <PrivateRoute
                    exact
                    path="/laporan"
                    component={Laporan}
                    StickyNav={StickyNavbar}
                  />

                  <Route component={NotFound} />
                </Switch>

如果我将 URL 更改为非私有路由，它不会引导我Landing 。 这是我的私人路线代码：

import React from "react"
import { Route, Redirect } from "react-router-dom"
import { connect } from "react-redux"
import PropTypes from "prop-types"

const mapStateToProps = state => ({
  auth: state.auth
})

const PrivateRoute = ({ component: Component, auth, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      auth.isAuthenticated === true ? (
        <Component {...props} {...rest} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
)

PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired
}

export default connect(mapStateToProps)(PrivateRoute)

Answer 1

根据@zhuber 所说，来自 react-redux 的身份验证 object 在调用私有路由之前不会调用。 因此，我使用 localStorage 从isAuthenticated更改了条件，如下所示：

      !isEmpty(localStorage.jwtToken) ? (
        <Component {...props} {...rest} />
      ) : (
        <Redirect to="/login" />
      )