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的auth对象。所以我像这样使用localStorage从isAuthenticated更改了条件：

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

专用路由React路由器始终重定向到第一个路由

1 个答案: