Question

我一直在试验一个新项目的路由器4，我遇到的一个小问题是如何确保“子”路由不从父路由继承。

假设我在根路由/处有一个页面，用于呈现导航和仪表板，'/ profile'显示用户配置文件，与根路由共享模板，但我想将用户重定向到{{1如果他们没有登录，使用RR4的结构，来自根路由的模板将反映在登录子路由上，我虽然有几种方法来获取这种行为，但他们都看起来很hacky，其中一种方式我想到的是使用RegEx。

不确定最佳方法应该是什么..

/login

登录和个人资料都显示<Router> <div> <Route path='/' component={() => <h1>Home Page</h1> }/> <Route path='/login' component={ () => <h1>Logins</h1> }/> <Route path='/profile' component={ () => <h1>Profile</h1> }/> </div> </Router>，但我只想要个人资料来执行此操作。

Answer 1

您需要在App组件中添加Switch，如下所示

<Router>
    <div>
       <Switch>
        <Route path='/' component={<HomeTemplate/>}/>
        <Route path='/login' component={ () => <h1>Logins</h1>  }/>           
       </Switch>
    </div>
</Router>

创建HomeTempate组件，并添加Switch以及需要派生模板的所有Route。

<Header/>
<TemplateSpecificComponents/>
<Switch>
      <Route path='/profile' render={ () =><h1>Profile</h1> }/>
      ...
</Switch>

从React Router文档（https://reacttraining.com/react-router/web/api/Switch）：

<Switch>的独特之处在于它专门呈现路线。相比之下，与位置匹配的每个<Route>都会包含这些内容。

编辑：更新以在个人资料中呈现HomeTemplate但不在登录中。

Answer 2

我想到解决这个问题的一种方法是使用HOC。例如

let template = function(WrappedComponent) {
  return class extends React.Component {
    render() {
      return (
         <h1>Home Page</h1>
         <WrappedComponent {...this.props}/>
      )
    }
  }
}

<Router>
    <div>
       <Switch>
        <Route path='/' component={ template() } exact/>
        <Route path='/login' component={ () => <h1>Logins</h1>  }/>
        <Route path='/profile' render={ template(<h1>Profile</h1> ) }/>
       </Switch>
    </div>
</Router>

React Router 4：来自根路由的不同模板

2 个答案: