重定向在 react-router-dom 中什么都不做

sevo 发表于 Dev

赛沃

import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
class App extends Component {
  constructor(){
    super();
    this.state = {
      windowWidth: window.innerWidth,
      navOpen: true,
      user: {
        id: '',
        name: '',
        email: ''
      }
    };
  }

  signIn = (data) => {
    if(data){
      this.setState({user: {
        id: data.id,
        name: data.name,
        email: data.email
      }});
      return <Redirect to='/'/> /*Right here when it come to here the page does nothing and no errors?*/
    }
  }

render() { 
    return(
      <div className='app'>
      <Router>
        <NavBar onNavClick={this.onNavClick} navOpen={this.state.navOpen}/>
        <Switch>
          <Route path="/" exact component={() => <Home />} />
          <Route path="/about" exact component={() => <About />} />
          <Route path="/contact" exact component={() => <Contact />} />
          <Route path='/catalogue' exact component={() => <Catalogue />} />
          <Route path='/login' exact component={() => <Login signIn={this.signIn} onRouteChange={this.onRouteChange}/>}/>
        </Switch>
      </Router>
      </div>
      );
  }
}
export default App;

我一次又一次地尝试，但它不会将页面更改为根目录，也不会出现任何错误。我到处找，但都是一样的。登录页面只运行登录功能。我究竟做错了什么？

德鲁里斯

问题

您不能只是从这样的函数回调中返回 JSX 并期望它被呈现，您将需要使用该history对象并发出命令性重定向，即history.replace("/");.
重定向不会从工作signIn回调由于App部件是外部提供的路由上下文Router由被渲染App。
您正在使用Route的componentprop 来渲染组件，但您使用的是内联函数，这实际上会在重新App渲染时卸载和重新安装组件。

解决方案

将Router组件在 React 树中App移到更高的位置，以便能够访问与Routes相同的路由上下文。您还需要将history对象传递给App. 如果App是一个功能组件，您可以在其中使用useHistory React 钩子，这将是微不足道的，但由于它不是，您将需要使用稍微不那么微不足道的withRouter高阶组件并注入路由 props。

history从注入的道具访问：
```
signIn = (data) => {
  if (data) {
    this.setState({user: {
      id: data.id,
      name: data.name,
      email: data.email
    }});
    this.props.history.replace("/");
  }
}
```
App用withRouterHOC装饰：
```
export default withRouter(App);
```
包裹App在Router.
```
<Router>
  <App />
</Router>
```

通过component正确使用道具修复路线，并render在需要传递额外道具时使用道具。

<Switch>
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  <Route path='/catalogue' component={Catalogue} />
  <Route
    path='/login'
    render={() => <Login signIn={this.signIn} onRouteChange={this.onRouteChange}/>}
  />
  <Route path="/" component={Home} />
</Switch>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。