I am facing the problem with react-router-dom

Question

File App.jsx

import React from "react";
import Master from "./Master";
import Appone from "./appone";
import { Routes, Route, BrowserRouter as Router } from "reactrouter-dom";
const App = () => {
return (
  <Router>
  <Routes>
    <Route path="/" component={<Master />} exact ></Route>
    <Route path="/days" component={<Appone />}></Route>
  </Routes>
</Router>);};
export default App;

if anyone wants to see the complete code it is in here

Basically, I am trying to make a two page react app so I am using routes and route tag that you can see in the codesandox but I am getting the error as

"Matched leaf route at location "/" 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 App)
    in App" 

Answer 1

In react-router-dom v6+, they had to replace component with element as <Route children> is reserved for nesting routes...There are some other arguments too as of why they changed it and you can read more about that over here.

So to answer to your question, maybe this is what you want:

<Route path="/" element={<Master />} exact ></Route>
<Route path="/days" element={<Appone />}></Route>

Answer 2

Take a look to https://reactrouter.com/docs/en/v6/upgrading/v5#relative-routes-and-links

Short, update to match this:

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Master />} />
        <Route path="/days" element={<Appone />} />
      </Routes>
    </Router>
  );
};