React: How to define the Homepage-CodePudding

I got a problem in react that the root link (the homepage) has no content excpet header footer. I can easily switch beween pages but in the "http://localhost:3000" there is no content except header an footer.

The code is as follows this:


  return (
    <>
      <Router>
        <Headernavbar />

        <Switch>

          <Route path='/sidenavigation/pages/galleries/home/imagegallery' component={Homepage} />
          <Route path='/sidenavigation/pages/galleries/abstract/imagegallery' component={Abstractcollection} />
          <Route path='/sidenavigation/pages/galleries/documentary/imagegallery' component={Documentarycollection} />

        </Switch>
      </Router>
    </>
  );
}

I there any idea on how it should be done?

CodePudding user response：

You can use * in the path like this:

return (
<>
  <Router>
    <Headernavbar />

    <Switch>

      <Route path='/sidenavigation/pages/galleries/home/imagegallery' component={Homepage} />
      <Route path='/sidenavigation/pages/galleries/abstract/imagegallery' component={Abstractcollection} />
      <Route path='/sidenavigation/pages/galleries/documentary/imagegallery' component={Documentarycollection} />
      <Route path='*' component={Homepage} />
    </Switch>
  </Router>
</>

CodePudding user response：

If you want some content on

http://localhost:3000

You need to render a component at path='/'

eg. <Route path="/" component={<App />}>. This means that whenever you hit localhost:3000 it directs you to / by default.

Try to modify your code like so:

<>
  <Router>
    <Headernavbar />

    <Switch>

      <Route path='/' component={Homepage} />
      <Route path='/sidenavigation/pages/galleries/abstract/imagegallery' component={Abstractcollection} />
      <Route path='/sidenavigation/pages/galleries/documentary/imagegallery' component={Documentarycollection} />
      <Route path='*' component={Homepage} />
    </Switch>
  </Router>
</>