how to solve Matched leaf route at location "/project" does not have an element error?

user_12799528 0
Viewed 91

I'm learning react routing but when I try to use BrowserRouter I'm getting the following error:

Matched leaf route at location "/project" does not have an element.
This means it will render an <Outlet /> with a null value by default
resulting in an "empty" page. 

  in Routes (created by Profile)
  in Profile (created by App)
  in App

PFA the code below.

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

APP.JS

import "./styles.css";
import Profile from "./Profile";
import { BrowserRouter } from "react-router-dom";
export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Profile />
      </BrowserRouter>
    </div>
  );
}

PROFILE.JS

import Home from "./Home";
import Projects from "./Projects";
import Blogs from "./Blogs";
import { Route, Routes, Switch } from "react-router-dom";
import { BrowserRouter, Link } from "react-router-dom";

const Profile = () => (
  <div>
    <Routes>
      <Route exact path="/" component={Home} />
      <Route path="/project" component={Projects} />
      <Route path="/blog" component={Blogs} />
    </Routes>
  </div>
);

export default Profile;

HOME.JS

const Home = () => {
  return <div>Hi im Home page</div>;
};

export default Home;

Please note project.js and blog.js is similar to home.js

react-router-dom react-router reactjs
1 Answers

You appear to be using react-router-dom@6. The Route component API changed significantly from v5. A single element prop replaced the component and render and children function props that takes a ReactNode, a.k.a. JSX, value.

Replace the component prop with the element prop and render the routed components as JSX.

const Profile = () => (
  <div>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/project" element={<Projects />} />
      <Route path="/blog" element={<Blogs />} />
    </Routes>
  </div>
);

See the Upgrading from v5 migration guide for other breaking changes between v5 and v6.

user_86908570
Related