屏幕上什么都沒有顯示反應路由器

Question

我有一段時間沒有使用 react，我不得不將 react-router-dom 升級到新版本，現在它無法正常工作。 我想我改變了我必須升級的一切。 屏幕上什么都沒有顯示它關於路徑的東西？ 我試過用“/”“”有或沒有精確。

import './App.css';

import { BrowserRouter as Router, Routes, Route } from "react-router-dom"

function App() {
  return (
    <Router>
      <Routes>
        <Route exact path="" component={<p>XD</p>} />
      </Routes>
    </Router>
  );
}

export default App;

Answer 1

使用element而不是component

import './App.css';

import { BrowserRouter as Router, Routes, Route } from "react-router-dom"

function App() {
  return (
    <Router>
      <Routes>
        <Route exact path="/" element={<p>XD</p>} />
      </Routes>
    </Router>
  );
}

export default App;

Answer 2

在react-router-dom版本 6 中， Route組件的component以及render和children function props 消失了，取而代之的是一個將ReactElement （即 JSX 文字）作為值的單個element prop。 在 RRDv6 中，所有路由/路徑現在也總是完全匹配，因此也不再存在exact prop。

<Routes> 和 <Route>

 declare function Route( props: RouteProps ): React.ReactElement | null; interface RouteProps { caseSensitive?: boolean; children?: React.ReactNode; element?: React.ReactElement | null; index?: boolean; path?: string; }

1. 切換到使用element屬性來渲染路由內容。
2. 刪除exact道具，不再需要。

代碼

<Router>
  <Routes>
    <Route path="/" element={<p>XD</p>} />
  </Routes>
</Router>

要了解 v5 的其他更改，請參閱遷移指南。