只渲染 react-route 的第一页

Question

this is my second using stackflow, so sorry if something is hard to understand, I'm creating a React project, and when I put the Route, only the first page is rendered, and no more, my site is practically One Page, only one page is not the About Page.

App.js

const App = () => {
 
  return (
    <>
      <Routes>
        <Route index path="/" element={<Home />} />
        <Route exact path="/Cardapio" element={<Cardapio />} />
        <Route exact path="/Knowmore" element={<Knowmore />} />
        <Route exact path="/About" element={<About />} />
        <Route path="*" element={<p>Página não encontrada</p>} />
      </Routes>   
    </>
  );
};
export default App;

Answer 1

Try this one

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
         <Route index element={<Home />} />
         <Route path="Cardapio" element={<Cardapio />} />
         <Route path="Knowmore" element={<Knowmore />} />
         <Route path="About" element={<About/>} />
         <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  );
}

if it is not working, please let me know. It can be related with react version or

Answer 2

If you want to render several of the components together on the same route they should all be combined and merged on the same path.

Example:

<Routes>
  <Route
    path="/"
    element={
      <>
        <Home />
        <Cardapio />
        <Knowmore />
      </>
    }
  />
  <Route path="/About" element={<About />} />
  <Route path="*" element={<p>Página não encontrada</p>} />
</Routes>

If you are wanting to link to the individual components, ie home, cardapio, and know more "sections", then assign appropriate element id attributes to them and target them with rendered raw anchor tags.

Basic example:

const Home = () => (
  <div id="home">
    Home
  </div>
);

const Cardapio = () => (
  <div id="cardapio">
    Cardapio
  </div>
);

const Knowmore = () => (
  <div id="knowmore">
    Knowmore
  </div>
);

Nav links in App :

<nav>
  <ul>
    <li>
      <a href="#home">Home</a>
    </li>
    <li>
      <a href="#cardapio">Cardapio</a>
    </li>
    <li>
      <a href="#knowmore">Know More</a>
    </li>
    <li>
      <Link to="/about">About</Link>
    </li>
  </ul>
</nav>

Answer 3

Try wrapping the content with <BrowserRouter> tag.