私有路由 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" />
      )