Reactjs React-路由和；登录后重定向到尝试的页面

实施react路由器4的最佳实践是什么？目前我创建了两个组件，

privaterroute

和

PublicRoute

PublicRoute

用于

/login

路径，它呈现

login

组件，

PrivateRoute

用于其余路径，如果用户登录或重定向，它呈现通过的组件<代码>专用路线代码为：

const PrivateRoute = ({component: Component, ...rest}) => (
<Route {...rest} render={(props) => (
    helpers.getCurrentUser()
        ? (
            <div className="wrapper">
                <Sidebar/>
                <div id="content">
                    <Navbar/>
                    <Component {...props}/>
                    <Footer/>
                </div>
            </div>
        ) :
        <Redirect
            to={{
                pathname: "/login",
                state: {from: props.location}
            }}
        />
)}/>

))

---

如果未记录，如何实现重定向到尝试的页面？

您应该使用组件的生命周期方法

componentdiddupdate

来处理路由的更新，如中所述

例如：

class AppContainer extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route path='*' component={RootRoute}/>
        </div>
      </BrowserRouter>
    )
  }
}

class RootRoute extends React.Component {
  static propTypes = {
    history: PropTypes.object, // this prop comes from withRouter feature
    location: PropTypes.object, // this prop comes from withRouter feature
    user: PropTypes.object // this prop should come from your App
  }

  componentDidUpdate() {
    this.checkSession({
      location: this.props.location.pathname,
      user: this.props.user
    })
  }

  checkSession({location, user}) {
    if (!user.isLogged() && !user.isLocationPublic(location)) {
      this.props.history.push('/login')
    }
  }

  render() {
    return (
      <div>
        <Switch>
          <Route path='/login' component={LoginRoute}/>
          <Route path='/backoffice' component={BackOfficeRoute}/>
        </Switch>
      </div>
    )
  }
}

export default withRouter(RootRoute)

class AppContainer扩展了React.Component{
render（）{
返回(
)
}
}
类RootRoute扩展了React.Component{
静态类型={
历史记录：PropTypes.object，//此道具来自withRouter功能
位置：PropTypes.object，//此道具来自withRouter功能
用户：PropTypes.object//此道具应来自您的应用程序
}
componentDidUpdate（）{
这是检查会话({
位置：this.props.location.pathname，
用户：this.props.user
})
}
checkSession（{location，user}）{
如果（！user.isLogged（）&&！user.isLocationPublic（位置））{
this.props.history.push（“/login”）
}
}
render（）{
返回(
)
}
}
使用路由器导出默认值（RootRoute）

您应该使用组件的生命周期方法

componentDidUpdate

来处理路由的更新，如中所述

例如：

class AppContainer extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route path='*' component={RootRoute}/>
        </div>
      </BrowserRouter>
    )
  }
}

class RootRoute extends React.Component {
  static propTypes = {
    history: PropTypes.object, // this prop comes from withRouter feature
    location: PropTypes.object, // this prop comes from withRouter feature
    user: PropTypes.object // this prop should come from your App
  }

  componentDidUpdate() {
    this.checkSession({
      location: this.props.location.pathname,
      user: this.props.user
    })
  }

  checkSession({location, user}) {
    if (!user.isLogged() && !user.isLocationPublic(location)) {
      this.props.history.push('/login')
    }
  }

  render() {
    return (
      <div>
        <Switch>
          <Route path='/login' component={LoginRoute}/>
          <Route path='/backoffice' component={BackOfficeRoute}/>
        </Switch>
      </div>
    )
  }
}

export default withRouter(RootRoute)

class AppContainer扩展了React.Component{
render（）{
返回(
)
}
}
类RootRoute扩展了React.Component{
静态类型={
历史记录：PropTypes.object，//此道具来自withRouter功能
位置：PropTypes.object，//此道具来自withRouter功能
用户：PropTypes.object//此道具应来自您的应用程序
}
componentDidUpdate（）{
这是检查会话({
位置：this.props.location.pathname，
用户：this.props.user
})
}
checkSession（{location，user}）{
如果（！user.isLogged（）&&！user.isLocationPublic（位置））{
this.props.history.push（“/login”）
}
}
render（）{
返回(
)
}
}
使用路由器导出默认值（RootRoute）

由于您已经将来自的位置作为位置状态传递给PrivateRoute中的重定向，因此您可以在从登录组件重定向回时使用相同的方法

在登录组件中，您将

onSuccessLogin = () => {
   const {location} = this.props;
   if(location.state && location.state.from) {
      this.props.history.push(location.state.from);
   } else {
      this.props.history.push('/');
   }
}

---

由于您已经将来自的位置作为位置状态传递给PrivateRoute中的重定向，所以您可以在从登录组件重定向回时使用相同的位置

在登录组件中，您将

onSuccessLogin = () => {
   const {location} = this.props;
   if(location.state && location.state.from) {
      this.props.history.push(location.state.from);
   } else {
      this.props.history.push('/');
   }
}

---

结合以上两个答案，这对我来说很有效：

  componentWillUnmount() {
    const {location} = this.props;
    if(location.state && location.state.from) {
      this.props.history.push(location.state.from.pathname);
    } else {
      this.props.history.push('/');
    }
  }

---

不要在componentDidUpdate中执行此操作-它将被连续调用。

结合上述两个答案，这对我很有效：

  componentWillUnmount() {
    const {location} = this.props;
    if(location.state && location.state.from) {
      this.props.history.push(location.state.from.pathname);
    } else {
      this.props.history.push('/');
    }
  }

---

不要在

componentDidUpdate

中执行此操作-它将被连续调用。

您的意思是如何在成功登录后将用户重定向到尝试的页面？您的意思是如何在成功登录后将用户重定向到尝试的页面？