如何导航到一个组件并将其作为整个页面打开

Question

当我点击“博客”时，我只想在整个页面上打开博客部分，而不是在主页上将额外的博客组件与其他组件一起打开。当我现在点击博客时，它会在同一页面上的团队组件之后打开。我怎样才能改变它并打开整个页面？

import React from 'react';
import './App.css';
import { BrowserRouter, Route} from "react-router-dom";
import Header from './components/Header';
import Home from './components/Home';
import About from './components/About';
import Team from './components/Team';
import Blog from './components/Blog';
import Contact from './components/Contact';
import ScrollToTop from './components/ScrollToTop';

const App = () => {
  return (
      <BrowserRouter>
      <Header />
      <Home />
      <About />
      <Team />
      <Route path="/blog" component={Blog}></Route>
      <Contact />
      <ScrollToTop />
      </BrowserRouter>
  );
}

export default App;

这是我的另一个组件：

import React from 'react';
import { Link as Link1} from 'react-scroll';
import { Link as Link2 } from 'react-router-dom';
import styled from 'styled-components';

const LeftNav = ({ open }) => {
    return (
        <NavMenu open={open}>
        <ul>
            <li>
                <Link1
                smooth={true}
                spy={true}
                offset={0}
                duration={1000}
                to="home"
                >Home</Link1>
            </li>
            <li>
                <Link1
                activeClass="active"
                smooth={true}
                spy={true}
                offset={0}
                duration={1200}
                to="about"
                >About</Link1>
            </li>
            <li>
                <Link1
                activeClass="active"
                smooth={true}
                spy={true}
                offset={0}
                duration={1200}
                to="team"
                >Team</Link1>
            </li>
            <li>
                <Link2 id="blog"
                to="/blog"
                target="_blank"
                >Blog</Link2>
            </li>
            <li>
                <Link1
                activeClass="active"
                smooth={true}
                spy={true}
                offset={0}
                duration={1200}
                to="contact"
                >Contact</Link1>
            </li>
        </ul>
    </NavMenu>
    )
}

export default LeftNav
````

Answer 1

您总是渲染页眉、主页、关于等，因为它们不在 <BrowserRouter/> 下的 <Route/> 组件内。正如你的 Blog 组件只有在你在 /blog 路线上时才会被渲染，但你的其余组件总是被显示，因为没有 <Route/> 包裹它们。你应该把你的主页放在一个路径下，你的博客页面放在另一个路径下，例如：

const App = () => {
  return (
      <BrowserRouter>
        <Route path="/home"> {/* <-- insert the right path for your main page here*/}
          <Header />
          <Home />
          <About />
          <Team />
          <Contact />
          <ScrollToTop />
        </Route>
        <Route path="/blog" component={Blog}></Route>
      </BrowserRouter>
  );
}

在上面的示例中，您应该仅在转到 {base_url}/home 时看到主页，因此如果您需要不同的内容，则必须根据您的需要进行配置。查看有关其路径属性的 Route 文档以正确设置它。

如何导航到一个组件并将其作为整个页面打开

How can I navigate to one component and open it as a whole page

navigation

reactjs

react-router

react-router-dom