Question

我的反应还很新，但是有人告诉我，在使网站成为一种很好的做法时，要有一个包含页眉，页面内容和页脚的布局组件，但是当使用React Router时，我希望页眉和页脚不只是更新页面内容，但是如果我将链接添加到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标记中，那么我会收到一条错误消息，指出如果我随后包装标题，页面内容和在浏览器路由器中的页脚，然后单击链接时它们都会全部更新，所以我在如何在不更新标题的情况下将链接包含在浏览器路由器中而感到困惑？

例如：

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;

Answer 1

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

pdf("labels_test.pdf", width = 15)
for(i in 1:42) {
print(ggplot(df2, aes(x = event, y = value, color = color)) + 
  geom_boxplot(show.legend = FALSE) + 
  scale_color_manual(values= c("PAD with event" = "#D85622", "PAD without event"="#2D416D")) +
  geom_point(data = df2 %>% filter(flag), show.legend = FALSE) +
  geom_label_repel(data = df2 %>% filter(flag) %>% unique(), 
                   aes(label = Study_no),
                   color = "black") +
  facet_wrap_paginate(~ key, ncol = 2, nrow = 2, page = i))
}
dev.off()

React Router我如何在浏览器路由器中包含标题链接而标题本身不会在重定向时更新

1 个答案: