React-router-dom 使用 'Route' 时不显示任何内容

Question

我正在尝试使用 react-routing-dom 库呈现一个超简单的网页。这是我的 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。相反，屏幕是完全空白的。没有警告、错误等；这是一个干净的构建。甚至外部整个 Router 块的 <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' 包含在“路由”中。

React-router-dom 使用 'Route' 时不显示任何内容

React-router-dom displays nothing when using 'Route'

reactjs

react-router

react-router-dom

react-component