反应路由器4：从根路线不同的模板

我一直在试验反应路由器4在一个新的项目和我遇到的一个小问题是如何确保“子”路线不会从父路线继承。反应路由器4：从根路线不同的模板

说我有一个页面在根路线/呈现导航和仪表板，'/ profile'显示用户配置文件，与根路线共享模板，但我想重定向用户/login，如果他们没有记录在RR4的结构中，来自根路由的模板将反映在登录子路由上，但我有几种方法可以获得这种行为，但它们都显得很不守规矩，我想到的其中一种方法是使用RegEx。

不知道，最好的办法应该是什么..

<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>

登录名和个人资料显示Home Page，但我只想简介做到这一点。

来源

2017-10-10 James Okpe George

您能否包含一些代码，特别是您配置的路线？ – MattD

你可以展示你的孩子的路线是如何“与根路线共享模板”吗？ – palsrealm

@MattD请找到更新 –

您需要在您的应用程序组件添加Switch如下

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

创建HomeTempate成分，并添加Switch所有Route s表示需要导出模板。

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

从阵营路由器文档（https://reacttraining.com/react-router/web/api/Switch）：

<Switch>是因为它呈现的路线完全是独一无二的。相反，与位置匹配的每个<Route>都包含在内。

编辑：更新后在Profile中渲染HomeTemplate，但不在Login中。

来源

2017-10-10 19:26:45 palsrealm

这种方法的问题是模板现在不能与配置文件页面共享，我仍然希望部分维护模板共享属性，同时防止它与几页共享 –

我曾想过解决这个问题的一种方法是使用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>

来源

2017-10-10 19:37:11

反应路由器4：从根路线不同的模板

回答

相关问题