How to load multiple routes in index file using react

user_7574199 0
Viewed 91

I have a following index file -

<BrowserRouter>
 <Routes>
  <Route path="/" element={Home}
  <Route element={Navigation}
</Routes>
</BrowserRouter>

I have multiple routes which I have to load So For that I have written a component:

 const Navigation = () => {
   <>
      <Route path="/not-available-primary" element={NotAvaliable}/>
      <Route path="/not-available-Secondary" element={Avaliable}/>
      <Route path="/available-primary" element={Primary}/>
      <Route path="/available-Secondary" element={Secondary}/>
      <Route path="/direct-debit-primary" element={DirectDBB}/>
      <Route path="/direct-debit-secondary" element={DirectDBBSecondary}/>
   </>
  }

But here, it does not render the component and gives no routes matched for location. How do I fix this ?

react-router reactjs javascript
4 Answers

You have to give a Component to the element prop, like this:

<BrowserRouter>
 <Routes>
  <Route path="/" element={<Home />} />
  <Route path="/*" element={<Navigation />} />
</Routes>
</BrowserRouter>

and

const Navigation = () => {
   return (<>
      <Route path="/not-available-primary" element={<NotAvaliable />}/>
      <Route path="/not-available-Secondary" element={<Avaliable />}/>
      <Route path="/available-primary" element={<Primary />}/>
      <Route path="/available-Secondary" element={<Secondary />}/>
      <Route path="/direct-debit-primary" element={<DirectDBB />}/>
      <Route path="/direct-debit-secondary" element={<DirectDBBSecondary />}/>
   </>)
  }

or

<BrowserRouter>
 <Routes>
  <Route path="/" element={<Home />} />
  <Route path="/*">
      <Route path="not-available-primary" element={<NotAvaliable />}/>
      <Route path="not-available-Secondary" element={<Avaliable />}/>
      <Route path="available-primary" element={<Primary />}/>
      <Route path="available-Secondary" element={<Secondary />}/>
      <Route path="direct-debit-primary" element={<DirectDBB />}/>
      <Route path="direct-debit-secondary" element={<DirectDBBSecondary 
      />}/>
  </Route>
</Routes>
</BrowserRouter>

Note that in the seconds solution (nested routes) I erased the "/".

Documentation here

user_172714830

in your index file

<Route path="/" compoment={Home}

if "Navigation" is your class

const Navigation = () => {
     return (
       <>
        <Routes>
          <Route path="/not-available-primary" component={NotAvaliable}/>
          <Route path="/not-available-Secondary" component={Avaliable}/>
          <Route path="/available-primary" component={Primary}/>
          <Route path="/available-Secondary" component={Secondary}/>
          <Route path="/direct-debit-primary" component={DirectDBB}/>
          <Route path="/direct-debit-secondary" component={DirectDBBSecondary}/>
        </Routes>
      </>
     )
    }
user_132881970

At the first use <Switch> in Navigation component :

const Navigation = () => {
   <Switch>
      <Route path="/not-available-primary" component={NotAvaliable}/>
      <Route path="/not-available-Secondary" component={Avaliable}/>
      <Route path="/available-primary" component={Primary}/>
      <Route path="/available-Secondary" component={Secondary}/>
      <Route path="/direct-debit-primary" component={DirectDBB}/>
      <Route path="/direct-debit-secondary" component={DirectDBBSecondary}/>
   </Switch>
  }

so, add the component to Route:

<BrowserRouter>
<Switch>
    <Route path="/" exact component={Home} />
    <Route path="/login" exact component={LoginForm} />
    <Route component={Navigation} />
</Switch>
</BrowserRouter>
user_138842550

Issue

It's unclear which version of react-router-dom you are trying to use. version 4/5 or 6, but you've syntax issues for either. The route rendering the Navigation component needs a path with a trailing "*" character to be matched at the root/base level so the descendent routes can then also be matched and rendered.

Using react-router-dom@5

Use the Switch component instead of the Routes component. The Route components use the component (or render or children function props). The home path "/" must exactly match in order for any other route to be matched when the path isn't exactly "/", e.g. "/not-available-primary".

<BrowserRouter>
  <Switch>
    <Route path="/" exact component={Home} />
    <Route path="*" component={Navigation} />
  </Switch>
</BrowserRouter>

...

const Navigation = () => {
  <Switch>
    <Route path="/not-available-primary" component={NotAvaliable} />
    <Route path="/not-available-Secondary" component={Avaliable} />
    <Route path="/available-primary" component={Primary} />
    <Route path="/available-Secondary" component={Secondary} />
    <Route path="/direct-debit-primary" component={DirectDBB} />
    <Route path="/direct-debit-secondary" component={DirectDBBSecondary} />
  </Switch>
};

Using react-router-dom@6

All Route components can only be rendered by a Routes component or another Route component in the case of route nesting. The Route component API changed significantly and there is now only a single element prop taking a ReactNode, a.k.a. JSX, as a value. In RRDv6 all routes are now always exactly matched and use a route ranking system; there is no longer an exact prop for Route components.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="*" element={<Navigation />} />
  </Routes>
</BrowserRouter>

...

const Navigation = () => {
  <Routes>
    <Route path="/not-available-primary" element={<NotAvaliable />} />
    <Route path="/not-available-Secondary" element={<Avaliable />} />
    <Route path="/available-primary" element={<Primary />} />
    <Route path="/available-Secondary" element={<Secondary />} />
    <Route path="/direct-debit-primary" element={<DirectDBB />} />
    <Route path="/direct-debit-secondary" element={<DirectDBBSecondary />} />
  </Routes>
};
user_86908570
Related