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

Javascript – React router dom not showing a component in the webpage

The Layout page is not showing up if the home page does and vice versa i tried changing the version of the react router dom to 5 but it is still not working I also used router insted of route it is still not working.

//App.js file
import React from "react";
import { Route,Routes } from "react-router-dom";
import Layout from './components/Layout';
import Home from './components/Home';
import './App.scss';

function App() {
  return (
    <Routes>
      <>
      <Route exact path='/' Component={Layout} />
      <Route exact path='/' component={Home} />
      </>
    </Routes>
  );
  }

export default App;

i also tried restarting the application and i also tried deleteing and reinstalling the react-router-dom and node_modules.

Tags:

2

Answers


  1. 0

    The paths you specified for both routes are the same.
    Use a different route for one component.
    And also if you are using react-router-dom version 6, pass component to element prop.

    import { Route, Routes } from 'react-router-dom';

// Import your components (Layout and Home) here

function App() {
  return (
    <Routes>
      <Route exact path="/" element={<Home />} />
       <Route exact path="/layout" element={<Layout />} />
    </Routes>
  );
}

export default App;
    Login or Signup to reply.
  2. 0

    You are using uppercase Component instead of lowercase component in your Route components.

    Change them to lowercase component:

    <Route exact path='/' component={Layout} />
<Route exact path='/home' component={Home} />

    In React Router v6, the Route components are not used anymore. Instead, you use the Routes component to define your route configuration. The individual routes are defined using the Route element inside Routes.

    Here’s how you should configure your routes:

    import React from "react";
import { Routes, Route } from "react-router-dom";
import Layout from './components/Layout';
import Home from './components/Home';
import './App.scss';

function App() {
  return (
    <Routes>
      <Route path='/' element={<Layout />} />
      <Route path='/home' element={<Home />} />
    </Routes>
  );
}

export default App;

    It seems like you want to show the Layout component when the home page is accessed, and the Home component when the /home route is accessed. Therefore, you should differentiate the paths for the two components:

    <Route path='/' element={<Layout />} />
<Route path='/home' element={<Home />} />

    Make sure that the Layout and Home components are correctly imported and that their paths are set up correctly in your project structure.

    Remember to update your Link components accordingly if you are using them to navigate between routes.

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

Back To Top
Search