'当使用带有状态的重定向组件时，你试图重定向到你当前所在的同一路由：“/”

Question

我正在尝试创建一个包含两个页面的小型演示应用程序，one 和 two。用户可以通过按下按钮从页面 one 导航到页面 two，但前提是第二页中的位置对象状态包含 key 属性。如果没有，则用户将被重定向到 one.

我遇到的问题是，当使用 to object 从 one 重定向并将状态传递给 two 时，React Router 警告：

You tried to redirect to the same route you're currently on: "/"

这对我来说没有意义，因为我试图将用户从 /one 重定向到 /two，而不是 / 到 /two。

App.js

import React, { Component } from 'react';
import './App.css';

import { NavLink, Redirect, Route, BrowserRouter as Router, Switch } from 'react-router-dom';


const App = () => (
  <Router>
    <div className="App">
      <ul>
        <li>
          <NavLink to="/one">One</NavLink>
        </li>
        <li>
          <NavLink to="/two">Two</NavLink>
        </li>
      </ul>

      <Switch>
        <Route path="/one" component={One} />
        <Route path="/two" component={Two} />
      </Switch>
    </div>
  </Router>
);


class One extends Component {
  constructor(props) {
    super(props);

    this.state = {
      shouldRedirect: false,
    };

    this.redirect = this.redirect.bind(this);
  }

  redirect() {
    this.setState({
      shouldRedirect: true,
    });
  }

  render() {
    const { shouldRedirect } = this.state;

    if (shouldRedirect) {
      return (
        // Replacing the below Redirect with the following corrects the error,
        // but then I'm unable to pass state to the second page.

        // <Redirect to="/two" />

        <Redirect
          to={{
            pathName: '/two',
            state: {
              key: 'Some data.',
            },
          }}
        />
      );
    }

    return (
      <div>
        <h3>This is the first page.</h3>
        <button type="button" onClick={this.redirect}>Click me to go to page two.</button>
      </div>
    );
  }
}

class Two extends Component {
  constructor(props) {
    super(props);

    this.state = {
      shouldRedirect: false,
    };

    this.redirect = this.redirect.bind(this);
  }

  componentWillMount() {
    const { location } = this.props;

    if (location.state && location.state.key) {
      const { key } = location.state;
      this.key = key;
    } else {
      this.redirect();
    }
  }

  redirect() {
    this.setState({
      shouldRedirect: true,
    });
  }

  render() {
    const { shouldRedirect } = this.state;

    if (shouldRedirect) {
      return (
        <div>
          <p>You&apos;re being redirected to the first page because a key was not provided.</p>
          <Redirect to="/one" />
        </div>
      );
    }

    return (
      <div>
        <h3>This is the second page.</h3>
        <p>The key you provided was &quot;{this.key}&quot;.</p>
      </div>
    );
  }
}

export default App;

App.css

.App {
  text-align: center;
}

Answer 1

您不应将 <Redirect> 用作 <switch> 中的另一条路线。它应该是条件驱动程序。使用下面的link作为参考。

https://reacttraining.com/react-router/web/example/auth-workflow

Answer 2

您传递的是 pathName 而不是 pathname。这应该可以解决问题。
code sandbox.

上的工作示例

<Redirect
      to={{
        pathname: "/two",
        state: {
          key: "Some data."
        }
      }}
    />

'当使用带有状态的重定向组件时，你试图重定向到你当前所在的同一路由：“/”

'You tried to redirect to the same route you're currently on: "/"' when using a Redirect component with state

node.js

reactjs

react-router

create-react-app