如何在 react-router v5 中正确包装路由?
How to properly wrap routes in react-router v5?
当我打开 /view
路由整个 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>
);
}
如果您使用 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>
);
}
当我打开 /view
路由整个 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>
);
}
如果您使用 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>
);
}