[英]React router how do I include header links in the browser router without the header itself updating on redirect
我对反应相当陌生,但有人告诉我,在制作网站时,它的良好做法是拥有一个包含页眉、页面内容和页脚的布局组件,但是在使用 React 路由器时,我希望页眉和页脚不只更新页面内容但是如果我在 browserrouter 标签之外的标题中添加链接,我会收到一个错误,说它们需要在里面,但是如果我然后将它们包含在标题中,则更新内容..
在标题中,我有一个带有如下链接的导航栏:
import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => {
return(
<nav className="header-links">
<Link to="/" className="link">Home</Link>
<Link to="/about" className="link">About</Link>
<Link to="/contact" className="link">Contact Us</Link>
</nav>
);
}
export default HeaderNav;
然后在布局文件中,我包含具有链接的标题
import React from 'react'
import Header from './header/header'
import Footer from './footer/footer'
const PageLayout = ({children}) => {
return (
<div className="layout-wrapper">
<Header />
<main className="site-content">{children}</main>
<Footer />
</div>
);
}
export default PageLayout;
然后我还有一个包含我的路由的路由器文件:
import React from 'react'
import HomePage from './pages/home'
import AboutPage from './pages/about'
import ContactPage from './pages/contact'
import {
Switch,
Route,
BrowserRouter
} from 'react-router-dom';
const Routes = () => (
<BrowserRouter>
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/about" component={AboutPage} />
<Route exact path="/contact" component={ContactPage} />
</Switch>
</BrowserRouter>
);
export default Routes;
我遇到的问题是,如果在 layout.js 中我只将页面内容包装在 browserrouter 标签中,那么我会收到一个错误,说我的链接需要在此内部,但是如果我将页眉、页面内容和页脚包装在browserrouter 然后它们在单击链接时都会更新,所以我正在努力解决如何在不更新标题的情况下将链接包含在 browserrouter 中?
例如:
import React from 'react'
import Header from './header/header'
import Footer from './footer/footer'
const PageLayout = ({children}) => {
return (
<div className="layout-wrapper">
<Routes>
<Header />
<main className="site-content">{children}</main>
<Footer />
<Routes />
</div>
);
}
export default PageLayout;
我可能完全不在乎这里,但我很确定你想要这样的东西:
<BrowserRouter>
<Header/>
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/about" component={AboutPage} />
<Route exact path="/contact" component={ContactPage} />
</Switch>
<Footer />
</BrowserRouter>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.