使用 Router、Routes、Route 时 React Components 不呈现

Question

I'm learning React and I'm being introduced to React Router DOM. My issue is that my components aren't rendering in the React App.

Here is my code:

import Home from "./pages/main/Home";
import Login from "./pages/login/Login";
import {Router, Routes, Route} from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </Router>
    </div>
      
  );
}

export default App;

Here is the code for the Home and Login Components:

const Home = () => {
    return (
        <div>Home</div>
    )
}
export default Home;

const Login = () => {
    return (
        <div>Login</div>
    )
}
export default Login;

I've tried to reinstall react-router-dom and tried using BrowerRouter instead but still no avail. Also the components render without using Router or Routes but when I use Routes it breaks. Furthermore, I received this warning message in the console.

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

The above error occurred in the <Router> component:

    at Router (http://localhost:3000/main.2c5a7d71e5ac5c56f4c5.hot-update.js:4470:15)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Answer 1

You are using the low-level Router and not passing required props to it.

Router

declare function Router( props: RouterProps ): React.ReactElement | null; interface RouterProps { basename?: string; children?: React.ReactNode; location: Partial<Location> | string; // <-- required? navigationType:; NavigationType: navigator; Navigator? // <-- required: static;: boolean; }

Just use one of the high-level router, ie BrowswerRouter , HashRouter , etc.

import {
  BrowserRouter as Router,
  Routes,
  Route
} from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </Router>
    </div>
      
  );
}