反应路由器不工作。它只显示一个空白屏幕

Question

我正在尝试制作一个简单的反应路由器。但它甚至不起作用。如果我不包含 <Routes> 标签，页面将是空白的。包括 <Routes> 标签后，它也不起作用。请看一下。

import React from 'react';
import './App.css';
import Nav from './Nav';
import About from './About';
import Shop from './Shop';
import{ BrowserRouter as Router, Switch, Route, Routes }from 'react-router-dom';

function App () {
  return (
    <Router>
      <main>
        <Nav/>
        <Routes>
          <Route path="/about" component={About}/>
        </Routes>
        <Routes>
          <Route path="/shop" component={Shop}/>
        </Routes>
      </main>
    </Router> 
  );
}

export default App;

编辑：我使用的是react-router-dom.

的最新版本(6.3.0)

Answer 1

您似乎在混合 React Router v5 和 v6 的语法。 <Routes> 标签在 v6 中使用，但 component 字段在 <Route> 中使用在 v5 中。您应该使用 v6，因为它是最新版本，因此您必须将 component 更改为 element。您也不能并排放置多个 <Routes>。

The documentation has a working example at the very top，我建议你从那个开始，然后根据你的需要修改。然后如果有什么东西坏了你可以回去看看你做错了什么。

反应路由器不工作。它只显示一个空白屏幕

React router is not working. It is showing nothing but a blank screen

router

reactjs

react-dom

ecmascript-2016