应用.js
class App extends Component {
render() {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={Login} />
<div>
<Header />
<div className="main">
<SideBar />
<Route
path="/dashboard"
exact
component={RequireAuth(Dashboard)}
/>
<Route path="/profile" exact component={RequireAuth(Profile)} />
</div>
</div>
</Switch>
</Router>
);
}
}
在这里,我希望标题和侧边栏在我更改路线时在所有页面上都是通用的,并且我得到了结果,但我认为这不是这样做的标准方法,请建议并帮助我,我应该如何创建通用布局 一些页面集和其他页面的另一个布局,如
<Router history={history}>
<Switch>
<layout1>
<Route path="/dashboard" exact component={RequireAuth(Dashboard)}/>
<Route path="/profile" exact component={RequireAuth(Profile)} />
</layout1>
<layout2>
<Route path="/otherinfo1" exact component={RequireAuth(OtherInfo1)}/>
<Route path="/otherinfo2" exact component={RequireAuth(OtherInfo2)} />
</layout2>
</Switch>
</Router>
我正在使用反应路由器 4.2.2
每次我登录并重定向到仪表板时,jQuery功能都不起作用,我总是需要刷新页面以运行jQuery相关的东西(如果可以提供帮助(
您可以为两组路由添加前缀,并使用标识符将其设置为路由路径,所有其他路由都可以进入相应的容器布局
<Router history={history}>
<Switch>
<Route path="/layout1" component={FirstContainer}/>
<Route path="/layout2" component={SecondContainer}/>
</Switch>
</Router>
那么你FirstContainer
会像
const FirstContainer = ({match}) => (
<div>
{/* other stuff */}
<Route path={`${match.path}/dashboard`} exact component={RequireAuth(Dashboard)}/>
<Route path={`${match.path}/profile`} exact component={RequireAuth(Profile)} />
{/* other stuff */}
</div>
)
和SecondContainer
const SecondContainer = ({match}) => (
<div>
{/* other stuff */}
<Route path={`${match.path}/otherinfo1`} exact component={component={RequireAuth(OtherInfo1)}}/>
<Route path={`${match.path}/otherinfo2`} exact component={RequireAuth(OtherInfo2)} />
{/* other stuff */}
</div>
)