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

Question

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>
)

}

I cannot test this at the moment but can you replace `path` with `url` in your `Route` components? I mean `path={'${url}/cones'}` instead of `path={'${path}/cones'}` — Ioannis Potouridis, May 15 '20 at 15:36

oozywaters · Accepted Answer · 2020-05-15T15:41:21.067

1

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>

edited May 15 '20 at 15:41

answered May 15 '20 at 15:33

oozywaters

1,171
1
8
17

Please check my question [link](https://stackoverflow.com/questions/65761672/react-route-content-disappears-on-page-refresh) – Synchro Jan 17 '21 at 15:07

score 0 · Answer 2 · answered May 15 '20 at 15:39

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>

microsoftjulius · Answer 3 · 2022-07-01T21:05:32.857

0

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)

edited Jul 01 '22 at 21:05

answered Jul 01 '22 at 20:29

microsoftjulius

300
3
10

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

3 Answers3