CODEWITHSUNDEEP
reactjsreact-router
n.kilani
n.kilani

Reputation: 41

React component disappears when I refresh the page (using react router)

I having a problem with react router. in my example when the route is http://localhost:3000/ingredient-collection/ and refresh the page refreshes normaly but when the route is http://localhost:3000/ingredient-collection/cones and I refresh the component disappears.

Its my first time using react router, so can you please help me

This is my App.js:

    return (
  <Router>
    <MuiThemeProvider theme={theme}>
      <Provider store={store}>
        <div className={classes.minSize}>
          <div className='mobileNavBar'>
            <NavBarMobile
              handleClick={this.handleClick} />
          </div>
          <div className='desktopNavBar'>
            <NavBarDesktop />
          </div>
          <MenuBar
            menuAnimation={menuAnimation}
            handleClick={this.handleClick}
          />
          <BackDrop
            menuAnimation={this.state.setOpen}
            handleClick={this.handleClick}
          />
          <Switch>
            <Route exact path="/"><GerHome /></Route>
            <Route exact path="/machine-collection"><GerMachineCollection /></Route>
            <Route exact path="/ingredient-collection"><GerIngredientPageRouter /></Route>
            <Route exact path="/enquiry-collection"><GerEquipmentPageRouter /></Route>
            <Route exact path="/enquiry-form"><EnquiryForm /></Route>
            <Route exact path="/contact-form"><ContactForm /></Route>
          </Switch>
          <FooterBar style={{ position: 'fixed', bottom: '0' }} />
        </div>
      </Provider>
    </MuiThemeProvider>
  </Router>
);

}

This is the GerIngredientsPageRouter.js: 

const GerIngredientPageRouter = () => {
let { path, url } = useRouteMatch();
return (
    <Router>
        <div className="PageRouterBackground">
            <span className="MainRouterHeader">Zutaten</span>
            <AppBar position="static" className="RouterMenu">
                <div className="TabRouterContainer">
                    <Tab
                        label="Saucen"
                        className="TabProdRouterIngredients"
                        component={Link}
                        exact to={`${url}`} />
                    <Tab
                        label="Waffelbecher/-hörnchen"
                        className="TabProdRouterIngredients"
                        component={Link}
                        exact to={`${url}/cones`} />
                    <Tab
                        label="Toppings"
                        className="TabProdRouterIngredients"
                        component={Link}
                        exact to={`${url}/toppings`} />
                    <Tab
                        label="Fertigmix"
                        className="TabProdRouterIngredients"
                        component={Link}
                        exact to={`${url}/mix`} />
                    <Tab
                        label="Pulver"
                        className="TabProdRouterIngredients"
                        component={Link}
                        exact to={`${url}/powder`} />
                </div>

            </AppBar>
            <Switch>
                <Route exact path={`${path}`}>
                    <GerSyrupsColPage />
                </Route>
                <Route path={`${path}/cones`}>
                    <GerConesColPage style={{ margin: '0' }} />
                </Route>
                <Route path={`${path}/toppings`}>
                    <GerToppingsColPage />
                </Route>
                <Route path={`${path}/mix`}>
                    <GerMixColPage />
                </Route>
                <Route path={`${path}/powder`}>
                    <GerPowderColPage />
                </Route>
            </Switch>
        </div>
    </Router>
)

}

Upvotes: 1

Views: 3316

Answers (3)

microsoftjulius
microsoftjulius

Reputation: 399

try to change the version of your react-router-dom in the package.json to "react-router-dom": "^5.2.0", and then run npm install (if you are using npm) or yarn (if you are using yarn)

Upvotes: 0

oozywaters
oozywaters

Reputation: 1241

This is because your route has exact prop set to true. That means that GerIngredientPageRouter will render only when location.pathname is /ingredient-collection. Just remove exact and the route will match:

<Route path="/ingredient-collection"><GerIngredientPageRouter /></Route>

Upvotes: 1

Ioannis Potouridis
Ioannis Potouridis

Reputation: 1316

Your Route components path doesn't match the ones specified in Tabs.

Use the extracted url from useRouteMatch instead of path.

E.g.:

<Route exact path={`${url}`}>
  <GerSyrupsColPage />
</Route>
<Route path={`${url}/cones`}>
  <GerConesColPage style={{ margin: '0' }} />
</Route>

Upvotes: 0

Related Questions