Question

render() {
 if(this.state.verified){
  return(<div>Verified</div>)
 }else {
   return(<Redirect to='/'/>)
 }
}

这会产生错误＆lt;重定向＆GT;元素仅用于路由器配置，不应呈现

这就是我理解的重新路由应该从反应路由器文档完成。上面的代码出了什么问题？有条件的重新路由应该如何做出反应？

Answer 1

从您收到的错误中，我假设您正在使用react-router版本＆lt; V4。在版本4之前，Redirect＆amp; Route个组件只能是Router组件的子组件，并且不能嵌套在组件中。在这些情况下，您需要做的是以编程方式重定向到不同的路径

componentWillUpdate(nextProps, nextState) {
    if(nextState.verified !== this.state.verified && !nextState.verified) { 
       //Programmatically Route here
    }
}
render() {
 if(this.state.verified){
  return(<div>Verified</div>)
 }
}

查看如何 Programmatically change routes with react-router

Answer 2

我猜测问题是您调用此方法的组件未在ReactRouter中使用。即如果你的组件被称为MyComponent，它应该在应用程序路由器内部调用，如下所示：

const RoutedApp = () => (
  <BrowserRouter >
    <Switch>
      <Route path="/my_component" component={MyComponent} />
    </Switch>
  </BrowserRouter>
);
ReactDOM.render(<RoutedApp />, root);

在React组件中重新路由

2 个答案: