你如何使用 React-router-dom 在页面之间切换？答案

【问题标题】：How do you switch between pages with React-router-dom?你如何使用 React-router-dom 在页面之间切换？
【发布时间】：2020-03-07 16:30:57
【问题描述】：

我有一个菜单，当我点击一个项目时，我需要菜单消失。我在这个平台上看到了一个解决方案来创建一个Pages 文件夹并在那里放置所有页面，但它不允许我做import Menu from '. / Pages'，我收到一个错误：cant resolve'. / Pages。我正在使用react-router-dom。链接解决方案：ReactJS How do you switch between pages in React? 链接沙箱：https://codesandbox.io/s/jovial-bartik-jsjj9line:12

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

根据您构建代码的方式，您必须像为 404 页面所做的那样：

import MainMenu from "./pages/MainMenu";

或者，如果您想保留./pages 样式，您可以在pages 文件夹中添加一个index.js 文件并导出您的组件

即

index.js

export * from './MainMenu.js'
export * from './404.js'
...etc

【讨论】：

看：Youtube.com 和 StackOverFlow
如果你仔细看他的视频，你会发现pages文件夹中有一个index.jsx文件
您的问题是关于应用程序无法解决./pages 的错误，我相信我的回答应该可以解决该问题。您还有其他问题吗？

【解决方案2】：

在你的 MainMenu.jsx 文件中，你需要 import React => import React from "react";

然后在您的 index.js 文件中将文件导入为 =>

从“./pages/MainMenu”导入 MainMenu；
从“./pages/404”导入 NotFountPage；
从“./pages/Clients”导入客户端；

编辑 index.js 文件并添加以下代码段：

<Router>
  <Switch>
    <Route exact path="/">
      <MainMenu/>
    </Route>
    <Route path="/404">
      <NotFountPage />
    </Route>
    <Route path="/clients">
      <Clients />
    </Route>
    <Redirect to="/404" />
  </Switch>
</Router>

【讨论】：

mmmm，mi 问题还在继续。当我点击客户时，我需要我的菜单消失。

【解决方案3】：

如果你只是想让一个项目消失，我会告诉你怎么做。

import Nav from "./nav";



consturctor(props) {
   super(props);

   this.state ={
    showNav: true
   }
}

render() {
  const show = this.state.showNav; // make a var to hold current state for this value
 return(
  {show ? <Nav />: null} // if show then show this component else show null
)

然后创建一个函数来改变那个状态

dontShowNav = () => {
   this.setState({showNav: false});  // set show to false hide component
   }
}

【讨论】：