I am new to javascript and React. I am trying to render two components Layout and Home from App.js. When I tried rendering Layout component alone from App.js. Its working. But When I added Home component in App.js. Both are not working. Can anyone please help me out to resolve the issue. Below is my code

App.js

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

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



export default App

Home.js

import LogoTitle from  '../../assets/images/logo-s.png'

const Home = () => {
    return (
        <div className="container home-page">
            <div className="text-zone">
                <hl>Hello World </h1>
            </div>
        </div>
    );
}


export default Home 

CodePudding user response：

Try some thing like. (index Route keep it nested)

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

CodePudding user response：

You need to carefully read the react-router-dom documentation. According to the documentation,

1. You must import {BrowserRouter as Router} from "react-router-dom".
2. You must wrap everything you return inside element.
3. You need to give every component a path to get that element on any action you're intended to get on.

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

export default function App() {
  return (
    <Router>    
        <div>
            <Routes>
                 <Route path="/" element={<Layout />} />
                 <Route path="/Home" element={<Home />} />
            </Routes>
      </div>
    </Router>
  );
}


export default App

4. If you want to get a specific component on some action e.g. on click, like inside home component, you first need to import { link } from "react-router-dom" and then use this as used in the code given below:

import LogoTitle from  '../../assets/images/logo-s.png'
import { link } from "react-router-dom"

const Home = () => {
    return (
        <Link to="/">Home</Link> //This must be inside your layout element, 
                                 //because this is your homepage for your 
                                 //website, according to how you have defined 
                                 //your routes.
    );
}


export default Home

CodePudding user response：

try and run please this code block

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