Question 189933 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – There is only one component is loading in react router dom and rest are not

There is only one component in my program for home page <Headline/> which is showing and rest are not.
Here is the code given below:

import React from 'react'
import Navbar from './components/Navbar';
import About from './components/About';
import Headline from './components/Headline';
import Dishes from './components/Dishes';
import Investor from './components/Investor';
import Customer  from './components/Customer';
import Order  from './components/Order';
import Footer  from './components/Footer';
import './style.css';
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>  
        <Route exact path='/' element={<Headline />}></Route>
        <Route exact path='/' element={<Dishes />}></Route>
        <Route exact path='/' element={<Investor />}></Route>
        <Route exact path='/' element={<Customer />}></Route>
        <Route exact path='/' element={<Order />}></Route>
        <Route exact path='/' element={<Footer />}></Route>  
        <Route exact path='/about'  element={<About />}></Route>
      </Routes>
    </Router>
  );
}

export default App;

I tried that all component should be loaded at home page with ‘path=/’ but only one component is loading and rest are not.

Tags:

3

Answers


  1. 0

    Try to wrap all the components in one single component and then

    <Route  exact path='/' element={<Home/>}></Route>
<Route exact path='/about'  element={<About/>}></Route>
    Login or Signup to reply.
  2. 0

    There is no home page component in your code snippet. There can also be only one Route per path per Routes component, which is why only the first route rendering Headline is matched and rendered.

    If you mean you want all the components on the "/" path to be rendered at the same time then place them all into a single JSX literal with a single route on "/".

    Example:

    function App() {
  return (
    <Router>
      <Navbar />
      <Routes>  
        <Route
          path='/'
          element={(
            <>
              <Headline />
              <Dishes />
              <Investor />
              <Customer />
              <Order />
              <Footer />
            </>
          )}
        />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

    You can, of course, refactor these "home page" components into a standalone component as well.

    const Home = () => (
  <>
    <Headline />
    <Dishes />
    <Investor />
    <Customer />
    <Order />
    <Footer />
  </>
);

    function App() {
  return (
    <Router>
      <Navbar />
      <Routes>  
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}
    Login or Signup to reply.
  3. 0

    In your code, you have multiple components with the exact prop set to true and the path prop set to ‘/’. The exact prop means that the route will only match if the location is exactly the same as the path. Since you have multiple routes with the same path, only the first matching route will be rendered.

    To render multiple components under the same route, you can nest the components within a parent component. You can modify your code as follows:

    function App() {
  return (
    <Router>
     <Navbar />
     <Routes>  
      <Route path='/' element={<Home />}></Route>
      <Route path='/about' element={<About />}></Route>
     </Routes>
    </Router>
  );
}

function Home() {
  return (
    <>
     <Headline />
     <Dishes />
     <Investor />
     <Customer />
     <Order />
     <Footer />
    </>
  );
}

    In this updated code, we create a new component called Home that represents the home page. Inside Home, we render all the components you want to display on the home page. By nesting them within Home, they will all be rendered together when the path matches ‘/’.

    Note that the exact prop is not needed for the Route components in this scenario since we’re nesting components within a parent route.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search