Question 233417 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – When I try to open the Default path, It's showing a blank white page instead of rendering both header and home components one after other

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import Header from "./Header";
function App() {
  return (
    <div className="app">
      <Router>
        <Routes>
          <Route path="/">
            <div>
              <Header />
              <Home />
            </div>
          </Route>
        </Routes>
      </Router>
    </div>
  );
}
export default App;

I want to render both the Header and Home components one below other when I try to open the default path.

Tags:

2

Answers


  1. 0

    The reason why you are getting a blank white page when you open the default path is that the div element that is wrapping the Header and Home components is not being rendered. This is because the Routes component only renders the child component that matches the current path. In this case, the current path is /, so the Home component is rendered, but the Header component is not.

    To fix this, you need to move the div element outside of the Routes component. This way, it will be rendered regardless of the current path. The updated code would look like this:

    import React from "react";
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import Header from "./Header";
function App() {
  return (
    <div className="app">
      <Router>
        <Routes>
          <Route path="/">
            <Home />
          </Route>
        </Routes>
      </Router>
      <div>
        <Header />
      </div>
    </div>
  );
}
export default App;

    Use code with caution. Learn more
    Now, when you open the default path, both the Header and Home components will be rendered one below the other.

    Here is a breakdown of what is happening in the updated code:

    The div element is now outside of the Routes component. This means that it will be rendered regardless of the current path.
    The Home component is still rendered inside of the Routes component because it is the child component that matches the current path.

    Login or Signup to reply.
  2. 0 
    in react router v6 react router Dom we have element prop available , there we can return the JSX with Home and Header component.

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

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

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

Back To Top
Search