Question

我有一个菜单，当我单击某个项目时，我需要菜单消失。我已经看到了在该平台上创建一个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-jsjj9行：12

Answer 1

使用您的代码结构方式，您必须像在404页上那样进行操作：

import MainMenu from "./pages/MainMenu";

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

即

index.js

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

Answer 2

在MainMenu.jsx文件中，您需要导入React => 从“反应”中导入React；

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

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

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

header()

Answer 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
   }
}

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

3 个答案: