Question

我的app的主要组件上有下一个路径：

<div>
    <h1><Link to="/">Home</Link></h1>

    <Switch>
      <Route exact path="/" component={FirstPage} />   
      <Route exact path="/:language?/second" component={SecondPage} />
      <Route exact path="/:language?/account" component={AccountPage} />
      <Route exact path="/:language?/add" component={AddNewPage} />
      <Route component={NoMatch} />
    </Switch>
  </div>

我需要添加每个子组件来检查this.props.match.params.language（这是反应路由器道具）以设置当前语言。但是白色的这个代码在每个组件中都可以看到我的想法。即使我把这个检查放在单个函数中，并将每个componentWiilMount调用它并将this.props.match.params.language道具传递给它，无论如何它是一堆乱码。例如，如果我有100条路线，我需要将此检查添加100次。此外，我考虑将此代码添加到主要组件生命周期，并在页面更改时调用它，但我在这里没有反应路由器支持。也许你知道更好的解决方案吗？

Answer 1

您可能想尝试嵌套路线。您可以拥有一个管理语言的父路由组件，然后嵌套子路由组件：

function Root() {
  return ( 
    <div>
      <h1><Link to="/">Home</Link></h1>

      <Route path="/:language?" component={LanguageSelector}/>
    </div>
  );
}

class LanguageSelector extends React.Component {
  componentDidMount() {
    // Manage language (if specified)
  }

  render() {
     return (
       <Switch>
         <Route .../>
         <Route .../>
       </Switch>
     );
  }
}

React路由器在每个路由组件中调用相同的代码

1 个答案: