How do you switch between pages with React-router-dom?

Question

I have a Menu, I need that when I click on an item the Menu disappears. I have seen a solution in this platform to create a Pages folder and there to put all the pages, but it does not allow me to do import Menu from '. / Pages', I get an error: cant resolve'. / Pages. I am working with react-router-dom. Link de posible solution: ReactJS How do you switch between pages in React? Link sandbox: https://codesandbox.io/s/jovial-bartik-jsjj9 line:12

score 3 · Answer 1 · answered Nov 12 '19 at 01:13

3

With the way you've structured your code, You'll have to do as you did for the 404 page:

import MainMenu from "./pages/MainMenu";

alternatively you can add an index.js file in the pages folder and export your components out if you want to keep the ./pages style

i.e

index.js

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

answered Nov 12 '19 at 01:13

Sherman Hui

938
3
10
22

look: [Youtube.com](https://youtu.be/hjR-ZveXBpQ?t=1054) and [StackOverFlow](https://stackoverflow.com/a/58672797/11281479) – Juan Silupú Maza Nov 12 '19 at 01:15
If you look at his video closely, you'll notice there is a `index.jsx` file in the `pages` folder – Sherman Hui Nov 12 '19 at 01:19
Your question was regarding the error with the app not being able to resolve `./pages`, I believe my answer should resolve that issue. Are you having another problem? – Sherman Hui Nov 12 '19 at 15:59

AchinthaI · Answer 2 · 2019-11-12T04:48:26.127

1

In your MainMenu.jsx file, you need to import React => import React from "react";

Then in your index.js file import the files as =>

import MainMenu from "./pages/MainMenu";
import NotFountPage from "./pages/404";
import Clients from "./pages/Clients";

Edit the index.js file and add the following code segment:

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

edited Nov 12 '19 at 04:48

answered Nov 12 '19 at 02:30

AchinthaI

41
5

mmmm, mi problem continues. I need my Menu to disappear when I click on Clientes. – Juan Silupú Maza Nov 12 '19 at 04:12

score 0 · Answer 3 · answered Nov 12 '19 at 03:19

If you are just trying to make a item disappear I will show you how.

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
)

then make a function to change that state

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

How do you switch between pages with React-router-dom?

3 Answers3