[英]React multi-page routing
我正在使用React
构建一个多页应用程序。 我有三个组成部分。 Header
将出现在所有页面上,并且Page1
和Page2
将在页眉下方呈现为不同的页面。 Header
看起来像这样:
class Header extends React.Component {
return (
<header component HTML code...>
{this.props.children} // this is where Page1 and Page2 will render
// depending on the URL
);
}
我的路由器组件看起来像这样(我正在使用react-router-dom
包):
const routes = (
<BrowserRouter>
<Switch>
<Route path="/" component={Header} />
<Route path="/welcome" component={Page1} />
<Route path="/default" component={Page2} />
</Switch>
</BrowserRouter>
);
访问/
呈现标题,但是/welcome
和/default
返回404。我尝试使用嵌套路由执行此操作:
<BrowserRouter>
<Route component={Base}>
<Route path="/welcome" component={Page1}/>
<Route path="/landing" component={Page2}/>
</Route>
</BrowserRouter>
这给出了一个错误-
You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored
有人可以指出我做错了吗? 有没有更好的方法来实现我想要的?
尝试这个:
const routes = () =>(
<BrowserRouter>
<div>
<Header />
<Route path='/welcome' exact component={Page1} />
<Route path='/default' exact component={Page2} />
</div>
</BrowserRouter>
)
由于我们没有为Header
指定任何Route
,因此它将始终呈现,而与路径无关
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.