问使用BrowserRouter React组件显示主菜单和辅助菜单

EN

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;

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;