display primary and secondary menu using BrowserRouter React Component

user_4645889 0
Viewed 72

I want to display a secondary menu after the user clics on an existing option which is part of the main menu, so far, after clic on the option the secondary control is not displayed.

This is my main menu:

import React from "react";
import { BrowserRouter, Route, Link, Switch, Redirect } from "react-router-dom";
import Products from "../components/Products/Products";
import Welcome from "../components/Products/Welcome";
import VerQuotes from "../components/Quotes/VerQuotes";

const MenuApps = () => {
  return (
    <div>
      <main>
        <BrowserRouter>
          <MainHeader />
          <Switch>
            <Route path="/" exact>
              <Redirect to="/welcome" />
            </Route>
            <Route path="/welcome">
              <Welcome />
            </Route>
            {/* exact es un parametro que permite distinguir que recurso mostrar */ }
            <Route path="/products" exact>
              <Products />
            </Route>            
            <Route path="/products/:productId">
              <ProductDetail />
            </Route>
            <Route path="/verquotes">
              <VerQuotes />
            </Route>
          </Switch>
        </BrowserRouter>
      </main>
    </div>
  );
};

export default MenuApps;

And this is the secondary menu:

import { Route, Switch, BrowserRouter, Redirect } from "react-router-dom";
import AllQuotes from "./AllQuotes";
import NewQuote from "./NewQuote";
import QuoteDetail from "./QuoteDetail";

function VerQuotes() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact>
          <Redirect to="/quotes" />
        </Route>
          {/* si no pongo exact no se renderiza la segunda opcion */}
        <Route path="/quotes" exact>
          <AllQuotes />
        </Route>
        <Route path="/quotes/:quoteId">
          <QuoteDetail />
        </Route>
        <Route path="/new-quote">
          <NewQuote />
        </Route>
      </Switch>
    </BrowserRouter>
  );
};

export default VerQuotes;

My question is: what am I missing to display the secondary menu?

Thanks a lot for your comments

react-router-dom react-router react-hooks reactjs
1 Answers

You need only one router for the entire app, so the BrowserRouter in VerQuotes is unnecessary. react-router-dom v5 also doesn't use relative links/paths, so all the nested routes in VerQuotes need to build on the existing "/verquotes" path.

Also, remember that within the Switch component that route path specificity and order matter! Order the routes from more specific to less specific paths so the more specific paths have a chance to be matched and rendered first.

import { Route, Switch, Redirect, useRouteMatch } from "react-router-dom";
import AllQuotes from "./AllQuotes";
import NewQuote from "./NewQuote";
import QuoteDetail from "./QuoteDetail";

function VerQuotes() {
  const { path, url } = useRouteMatch();

  return (
    <Switch>
      <Route path={`${path}/quotes/:quoteId`}>
        <QuoteDetail />
      </Route>
      {/* si no pongo exact no se renderiza la segunda opcion */}
      <Route path={`${path}/quotes`}>
        <AllQuotes />
      </Route>
      <Route path={`${path}/new-quote`}>
        <NewQuote />
      </Route>
      <Redirect from={path} to={`${path}/quotes`} />
    </Switch>
  );
};
user_86908570
Related