React Router v6 不渲染任何东西

Question

当使用 react-router-dom 时，应用程序中没有任何 rednerr（空白页面），我的组件在没有路由的情况下工作（在代码中注释）。我不知道为什么会这样。

p.s。我没有包含 {jobs} 对象，但这与问题无关。

这是我的代码：

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

使用 React Router V6，路由的内容应该由属性 element.

传递

参见下面的示例：


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

路由需要一个元素来知道加载什么。

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

应该是：

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

被调用的元素：

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

React Router v6 不渲染任何东西

React Router v6 not rendering anything

reactjs

react-router