[英]How to properly wrap routes in react-router v5?
the problem when I open /view
route entire BaseLayout
is rendering and I've tried many different ways still no luck当我打开
/view
route 整个BaseLayout
时的问题正在渲染,我尝试了许多不同的方法仍然没有运气
import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
function App() {
return (
<Router>
<Root>
<Route path="/" exact component={Home}/>
<BaseLayout>
<Route path="/dashboard" exact component={Dashboard} />
<Route path="/sa" exact component={sample} />
</BaseLayout>
<Route path="/view" exact component={Post} />
</Root>
</Router>
);
}
If you use the render
props instead of the component
one and if you wrap the component you want to render using your BaseLayout
like the above, it should work:如果您使用
render
道具而不是component
一,并且如果您像上面一样使用BaseLayout
包装要渲染的组件,它应该可以工作:
import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
function App() {
return (
<Router>
<Root>
<Route path="/" exact component={Home}/>
<Route path="/dashboard" exact render={() => (
<BaseLayout><Dashboard /></BaseLayout>
)} />
<Route path="/sa" exact render={() => (
<BaseLayout><sample /></BaseLayout>
)} />
<Route path="/view" exact component={Post} />
</Root>
</Router>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.