reactjs - 登录时重定向到上一个路径 - React Router v4

Question

我正在使用React Router v4并尝试实现一个功能，无论用户点击什么路线，他都会被带到登录页面，即如果他尚未登录。

但登录后，他被重定向到登录前尝试访问的同一页面

我已经设法使用下面的代码对其中 2 条路线执行此操作，但不确定这是否是执行此操作的最佳方法

<Route path="/dashboard" render={(props) => (
    auth ? 
    (<MainDash props={this.props} />) 
    : 
    (<Redirect to="/login"/>)
    )}
/>
<Route exact path="/customers" render={(props) => (
    auth ? 
    (<MainApp />) 
    : 
    (<Redirect to="/login"/>)
    )}
/>
<Route exact path="/staff" render={(props) => (
    auth ? 
    (<MainApp />)
    : 
    (<Redirect to="/login"/>)
    )}
/>
<Route path="/login" component={Login} />
<Route path="/logout" component={Login} />

现在，虽然这工作正常，但我不想为所有不同的路线一次又一次地重复相同的代码。那么有没有更好的方法来做到这一点？

现在，注销后，它没有显示任何内容，我希望它显示登录页面。因此我也添加了以下几行，这样用户注销后就会显示登录页面。

<Route path="/login" component={Login} />
      <Route path="/logout" component={Login} />

但是还有一个问题 -> 虽然注销后它确实显示登录组件，(仍然显示路由为 '/logout' )，但它让我回到登录表单(这次路由是 '/login' )并从这条路线登录将我带到仪表板。现在，为什么会发生这种情况？

希望得到一些帮助，因为我仍在学习 react 路由器

Answer 1

关注此example您可以创建一个组件 PrivateRoute 来包装 Route 并在需要需要身份验证的路由时使用它。

这是示例中的组件代码。

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
            fakeAuth.isAuthenticated ? 
            (<Component {...props}/>) 
            : 
            (
              <Redirect to={{
                    pathname: '/login',
                    state: { from: props.location }
                }}
              />
            )
        )}
    />
)