React Private Route重定向

时间:2017-07-07 22:14:56

标签: reactjs react-router

我设置了一个以密码页面开头的私有路由。用户输入密码后,将其转到条款/条款。当他们接受条款时,会有一个链接将他们带到家/家。

现在假设我向某人发送了一个指向/ page1的链接。它到达/(登录),然后转到条款,但然后需要链接到/ page1。但它会去/ home。是否有一种编程方式来跟踪最初请求的网址,并将其放在条款页面上的链接中,而不是/ home?

这是我的私人路线代码

import { Route, Redirect } from 'react-router-dom';
import React from 'react';

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

export default PrivateRoute;

这是/ terms

的代码
import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Terms extends Component {

  render() {
    return (
      <div className="wrapper">
        <div className="login_content">

          <div className="button"><Link to="/home">I Agree</Link></div>
        </div>
      </div>
    );
  }
}

export default Terms;

1 个答案:

答案 0 :(得分:0)

我猜你有一个索引文件,你可以放置所有路线。也许你的路线定义如下。

<PrivateRoute path="/mypath" component={MyComponent} />

现在,在您定义PrivateRoute的组件中,只需添加路径属性。

const PrivateRoute = ({ path, component: Component, isLoggedIn, ...rest }) => (
   if (path === '/mypath') {
      // Do something
   }
    ...
)

这应该帮助你。