React Router v6 不渲染任何东西

Question

when using react-router-dom, nothing rednerr in the App (blank page), my components work without the routing (commented in the code). I have no Idea why this is happening.

ps i did not include the {jobs} object but that is irrelevant to the problem.

Heres my code:

import React from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";
import List from './components/list/List';
import Navbar from './components/navbar/Navbar';

function App() {  
//  return (
//   <>
//     <Navbar />
//     <div className='w-full flex flex-col content-center items-center'>
//       <List jobs={jobs} />
//     </div>
//   </>
//  )
  return (
    <Router>
      <div>
        <Navbar />
        <Routes>
          <Route path="/contact">
          </Route>
          <Route path="/company/:id">
          </Route>
          <Route path="/companies">
          </Route>
          <Route exact path="/">
              <div className='w-full flex flex-col content-center items-center'>
                <List jobs={jobs} />
              </div>
          </Route>
        </Routes>
      </div>  
    </Router>     
  )
}

export default App

Answer 1

with React Router V6, the content of the route should be passed by the property element .

See example below:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import List from './components/list/List';
import Navbar from './components/navbar/Navbar';

function App() {
  //  return (
  //   <>
  //     <Navbar />
  //     <div className='w-full flex flex-col content-center items-center'>
  //       <List jobs={jobs} />
  //     </div>
  //   </>
  //  )
  return (
    <Router>
      <div>
        <Navbar />
        <Routes>
          <Route path="/contact"></Route>
          <Route path="/company/:id"></Route>
          <Route path="/companies"></Route>
          <Route
            exact
            path="/"
            element={
              <div className="flex w-full flex-col content-center items-center">
                <List jobs={jobs} />
              </div>
            }
          />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Answer 2

Routes need an element to know what to load.

<Route path="/contact"> </Route>

Should be:

<Route path={"/contact"} element={<Contact />} />

And the element being called:

export function Contact(){
  return <div>Contact us</div>
}