时间戳

首页 > 解决方案 > 反应路由器如何在浏览器路由器中包含标头链接，而标头本身不会在重定向时更新

javascript - 反应路由器如何在浏览器路由器中包含标头链接，而标头本身不会在重定向时更新

问题描述

我对做出反应还很陌生，但有人告诉我，在制作网站时最好使用一个包含页眉、页面内容和页脚的布局组件，但是在使用反应路由器时，我希望页眉和页脚不只更新页面内容但是如果我在 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;

标签： javascriptreactjsreact-router

解决方案

我可能完全不在这里，但我很确定你想要这样的东西：

<BrowserRouter>
    <Header/>
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/about" component={AboutPage} />
      <Route exact path="/contact" component={ContactPage} />
    </Switch>
    <Footer />
  </BrowserRouter>

推荐阅读