React-router 未在瀏覽器中顯示組件

Question

App.js 內部：

import React, { useState } from 'react';
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Dashboard from './components/Dashboard/Dashboard';
import Preferences from './components/Preferences/Preferences';
import Login from './components/Login/Login';

function App() {
  const [token, setToken] = useState();

if(!token) {
return <Login setToken={setToken} />
}

return (
<div className="wrapper">
  <h1>Application</h1>
  <BrowserRouter>
    <Routes>
      /*<Route path="/dashboard">*/
      <Route path="/dashboard" element={<Dashboard/>} /></Route>
      /*<Route path="/preferences">*/
      <Route path="/preferences" element={<Preferences/>} /></Route>
    </Routes>
  </BrowserRouter>
</div>
);
}

export default App;`

在 Dashboard.js (../src/components/Dashboard/Dashboard.js) 中：

import React from 'react';

export default function Dashboard() {
  return(
  <h2>Dashboard</h2>
  );
 }

網址：http://localhost:3000/dashboard

我想在加載瀏覽器時看到儀表板內容以及應用程序頁面內容（應用程序和儀表板標題）。 但是當我加載瀏覽器時，它只顯示 App 頁面內容並得到相同的錯誤：

   "Matched leaf route at location "/dashboard" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page."

Answer 1

您正在使用Routes而不是Router 。 在第 3 行和 return() 中替換它。

資料來源：React-router https://v5.reactrouter.com/web/api/Route

//...
import { BrowserRouter, Route, Router } from 'react-router-dom'; 
//...
    
    return ( ...
        <Router>
          /*<Route path="/dashboard">*/
          <Route path="/dashboard" element={<Dashboard/>} />
          /*<Route path="/preferences">*/
          <Route path="/preferences" element={<Preferences/>} />
        </Router>
    ...)

    
export default App;

Answer 2

請說明您使用的是哪個版本的 React 路由器，因為很多功能都發生了變化，是6.4還是仍然是5 ？

無論哪種方式，請刪除路線的評論，我認為它們根本沒有幫助。

如果你從6.4版本中選擇BrowserRouter那么它應該像這樣使用

    import { BrowserRouter, Route } from 'react-router-dom'; 
        
        return (
            <BrowserRouter>
              <Route path="/" element={<RootComp />} >
                <Route path="dashboard" element={<Dashboard/>} />
                <Route path="preferences" element={<Preferences/>} />
              </Route>
            </BrowserRouter>
        )
    
        
    export default App;

<RootComp />應該有一個<Outlet />作為孩子

    import { Outlet } from 'react-router-dom';

    const RootComp = () => { 
     return <div><Outlet /></div>
    }
        
    export default RootComp;

同樣，這是針對最新的 React Router 組件，但是，我建議使用createBrowserRouter()而不是舊的基於組件的樹，這樣您就可以以編程方式創建和管理對象中的路由。