React-router 无法重定向到“/”路由

Question

我无法通过react-router 重定向到“/”路径。我的App.jsx 文件如下所示：

ReactDOM.render(<Router>
    <Switch>
      <Route exact path="/" component={Content} />
      <Route path="/login" component={Auth} />
      {/* <Route component={NotFound} /> */}
    </Switch>
  </Router>, document.getElementById("root"));

添加 这是我的身份验证组件，它决定了重定向登录或注册的身份验证表单：

export default class Auth extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoginActive: true,
    };

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

  formChange() {
    this.setState({ isLoginActive: !this.state.isLoginActive });
  }

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

    let view = isLoginActive ? (
      <Login apiUrl={apiUrl} formChange={this.formChange} history={this.props.history} />
    ) : (
      <Register apiUrl={apiUrl} formChange={this.formChange} history={this.props.history} />
    );

    return (
      <div className="container">
        {getCookie("token") == null ? view : <Redirect to="/" />}
      </div>
    );
  }
}

这里是登录组件，在成功的 axios 请求上重定向到链接到内容组件的“/”路径

    export default class Login extends React.Component {
      //constructor
    
      login() {
        // axios request
        this.setState({ userLoggedIn: true });
      }
    
      render() {
        return this.state.userLoggedIn ? (
          <Redirect exact to="/" />
        ) : (
          <div className="base-container">
              <button type="button" className="btn" onClick={this.login}>
                Login
              </button>
            </div>
          </div>
        );
      }
    }

如果我在这里将<Redirect exact to="/" /> 的路线更改为任何其他路线，例如'/home'，一切都会完美运行。所以我不能重定向到'/'路由。

Answer 1

您是否尝试过像这样向<Redirect/> 添加“from”和“to”属性：

<Redirect exact from="/login" to="/" />

根据React Router docs，您必须将“exact”与“from”属性一起使用。请注意下方。

精确：布尔 完全匹配；等同于 Route.exact。注意：这只能与 from 结合使用，以在渲染 a 的内部时精确匹配位置。详情请参阅。

我通常也使用“history”属性进行重定向，该属性作为props，由react-router-dom提供，在像这样的路由器组件中。 "It Pushes a new entry onto the history stack"。它是这样工作的 - this.props.history.push('/')

编辑 ----------

你的导入是像 "import {BrowserRouter as Router} from 'react-router-dom" 吗？ 我在这里复制了您的代码，并且工作正常。我如上所述导入。在 Auth 组件中，我正在传递所有路由器道具，而不仅仅是历史，使用 <Redirect /> 或将“/”路由放在历史堆栈顶部，看看：

Index.js：

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={Content} />
      <Route path="/login" component={Auth} />
    </Switch>
  </BrowserRouter>,
  document.getElementById('root')
)

Auth.js

export default class Auth extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      isLoginActive: true,
    }
  }

  render() {
    // passing all route props (location, history, match)
    const view = <Login {...this.props} />

    return <div className="container">{view}</div>
  }
}

登录.js

export default class Login extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      userLoggedIn: false,
    }
    this.login = this.login.bind(this)
  }

  login() {
    this.setState({ ...this.state, userLoggedIn: true })
  }

  render() {
    // console.log(this.props)
    return this.state.userLoggedIn ? (
      //   <Redirect exact from="/login" to="/" /> also works
      this.props.history.push('/')
    ) : (
      <div className="base-container">
        <button type="button" className="btn" onClick={this.login}>
          Login
        </button>
      </div>
    )
  }
}

另请注意，在登录组件中带有 className "base-container" 的 div 中有一个不正确的额外 </div>

Answer 2

问题恰好出在作为中间层的 Auth 组件中。删除后一切正常。 Felipe Curcio 非常感谢您的帮助。