使用“路由”时，React-router-dom 不显示任何内容

Question

我正在尝试使用 react-routing-dom lib 呈现一个超简单的网页。这是我的 app.js

import React from 'react';
import Nav from './nav.js';
import Shop from './shop.js';
import About from './about.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import './App.css';

function App() {
  return (
    <>
    <Nav />
    <Router>
      <Route exact path='/' element={<About />} />
      <Route exact path='/shop' element={<Shop />} />
    </Router>
    </>
  );
}

export default App;

使用它，我运行npm start 并期望<Nav /> 和<About /> 组件呈现在http://localhost:3000。相反，屏幕是完全空白的。没有警告、错误等；这是一个干净的构建。甚至没有呈现整个路由器块外部的<Nav /> 组件！

情节变厚了：当我构建并运行以下内容时，所有三个组件都会呈现。

import React from 'react';
import Nav from './nav.js';
import Shop from './shop.js';
import About from './about.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import './App.css';

function App() {
  return (
    <>
    <Nav />
    <Router>
      <About />
      <Shop />
    </Router>
    </>
  );
}

export default App;

据此，我认为可以安全地假设<Route /> 是问题所在。

react-router-dom 似乎在相对较短的时间内发生了很大的变化，因此有很多过时的信息。如果有人能指出我正确的方向，我将非常感激。

Answer 1

我看到唯一缺少的是包装Route 组件的Routes 组件。您导入了Routes，但似乎没有使用它。所有Route 组件必须呈现为Routes 组件（如果嵌套则另一个Route）。如果没有Routes，您应该看到错误A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

<Router>
  <Routes>
    <Route exact path="/" element={<About />} />
    <Route exact path="/shop" element={<Shop />} />
  </Routes>
</Router>

Answer 2

检查您是否安装了 react-router-dom 版本 6。对于版本 6，您必须将所有 'Route' 包装在“Routes”中。