Only the first page of react-route is rendered

Gustavo Souza 0
Viewed 47

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;
react-router reactjs javascript
3 Answers

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 v17 or v18

Nicholi Jin0

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, i.e. 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>

Edit only-the-first-page-of-react-route-is-rendered

Drew Reese0

Try wrapping the content with <BrowserRouter> tag.

userfQGl0
Related