当使用来自 react-router-dom 的 <Link /> 时，如何修复此 React 组件无法正确呈现？

Question

我正在尝试在 React 中构建一个摄影作品集，但是，我不确定我是否正确使用了 Link 函数。每当我在网站上单击 link 时，它只会将新页面覆盖在旧页面上。我该如何修复它，使其重新呈现新页面而看不到旧页面？

例如，当我在主页上点击一个link时，新出现的是这样的：

我已将整个应用程序打包到 index.js 文件中。

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

我已经在 app.js 中添加了路由并将它们包装在一个开关中。我还用 withRouter.

包装了 app.js 组件

class App extends Component {
  render() {
    let routes = (
      <switch>
        <Route path="/" component={Home} />
        <Route path="/Portfolio/Astro" component={Astro} />
        <Route path="/Portfolio/Travel" component={Travel} />
        <Redirect to="/" />
      </switch>
    );

    return (
      <div className="App">
        <Layout>
          <Switch>{routes}</Switch>
        </Layout>
      </div>
    );
  }
}

export default withRouter(App);

布局组件将工具栏添加到屏幕顶部：

class Layout extends Component {
    render() { 
        return (
            <Aux>
                <Toolbar />
                <main className={classes.Content}>{this.props.children}</main>
            </Aux>
        );
    }
}
 
export default Layout;

而 navlinks 组件在按下时具有汉堡菜单的所有 links:

const NavLinks = ({ toggle, nav }) => {
  let style;

  if (nav) {
    style = {
      transform: `translate(0)`,
      opacity: 1,
    };
  }

  return (
    <nav className="nav-slide" style={style}>
      <div className="page-links">
        <Link onClick={toggle} to="/" className={`link-page ${nav ? "link-page-open" : ""}`}>
          Home
        </Link>
        <Link onClick={toggle} to="/Portfolio/Astro" className={`link-page ${nav ? "link-page-open" : ""}`}>
          Astro
        </Link>
        <Link onClick={toggle} to="/Portfolio/Travel" className={`link-page ${nav ? "link-page-open" : ""}`}>
          Travel
        </Link>
      </div>
    </nav>
  );
};

export default NavLinks;

Answer 1

还补充了@Dov Royal 所说的内容，您不需要 <switch> 包装器。 <Switch> 包装器就足够了

Answer 2

这是因为你在两个部分中使用了 switch。我建议你正确阅读 react-router-dom 文档。 custom-link in react-router-dom

当使用来自 react-router-dom 的 <Link /> 时，如何修复此 React 组件无法正确呈现？

How can I fix this React component not rendering properly when using <Link /> from react-router-dom?

hyperlink

reactjs

react-router

react-router-dom