React 路由器 v6 路由問題

Question

我正在嘗試創建一個 spring 啟動應用程序，其中包含反應代碼。我有這樣的 App.js。只有默認路由有效，其他路由無效。

import './App.css';
import React from 'react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
import "react-datepicker/dist/react-datepicker.css";
import 'react-js-dialog-box/dist/index.css';
import {BrowserRouter, BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import UploadData from './UploadData';
import RoutesOfApplication from './RoutesOfApplication';
import '@szhsin/react-menu/dist/index.css';
import '@szhsin/react-menu/dist/transitions/slide.css';
//const rootElement = document.getElementById("root");

class App extends React.Component {
    render(){
    console.log('In App');
        return(
            
    <BrowserRouter>
      <Routes>
      
        <Route path="/" element={<RoutesOfApplication/>} />
        <Route path="/*" element={<RoutesOfApplication/>} />
        <Route path="/UploadData" element={<UploadData/>}/>
        <Route path="/:id" element={<UploadData/>}/>
      </Routes>
    </BrowserRouter>
        );
    }   

}
export default App;


package.json : "react-dom": "^17.0.2",
    "react": "^17.0.2",
    "react-router-dom": "^6.3.0"

我錯過了什么嗎？

Answer 1

可能是第二條路徑線上的path = "/*"導致了這個問題。 如果 React 按路由順序運行，那么“/*”將捕獲所有路由而不處理 /UploadData。

如果這不起作用，我注意到您從“react-router-dom”導入了 BrowserRouter 兩次，也許您第二次將其作為別名“BrowserRouter as Router”導入時刪除了？

希望這有效！

如果您更改了順序或刪除了該路徑，它是否有效？

Answer 2

這里的問題是您在同一路由中有一個通配符路徑"/*"和一個動態路徑"/:id" 。

"/:id"路由是動態路由，因此 React 路由器不關心它是一個實際的 32 位唯一 ID 還是單詞“hello”。 因此，它也是一個通配符路由 ( "/*" )，但具有在使用useParams掛鈎時為您提供名為id的參數的附加功能。

在您的示例中，由於所有路由都處於同一級別，因此通配符路由將由於更高的特異性而始終獲勝（因為它匹配自身、根路徑"/" 、 /UploadData和"/:id" ）。 "/UploadData"只能匹配自身、 "/:id"和/* ，因此它總是具有較低的特異性。

為了解決這個問題，您可以通過在路由中嵌套路由來使用相對路由，並使用索引路由來匹配子項不匹配的路由，而不是通配符。 下面是一個例子。

    <BrowserRouter>
      <Routes>
        <Route path="/">
           <Route path="UploadData" element={<UploadData/>}/>
           <Route path=":id" element={<UploadData/>}/>
           <Route index element = {<RoutesOfApplication/>} />
        </Route>
      </Routes>
    </BrowserRouter>

這樣，在"/" 、 "/UploadData"和"/:id"上應用正確的路由，並且在任何不匹配的路由上應用索引。 因此，我們的路線覆蓋了適當的邏輯。

您可以在此處閱讀更多有關 React 路由器版本 6 如何選擇正確的路由（基於 SPECIFICTY）以及如何構建它們的信息

Answer 3

讓我們了解使用不同路徑呈現的組件。

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<h1/>Root Route</h1>} />
        <Route path="/*" element={<h1>Catch All Route</h1>} />
        <Route path="/UploadData" element={<h1>Upload Data Route</h1>} />
        <Route path="/:id" element={<h1>Id Route</h1>} />
      </Routes>
    </BrowserRouter>

使用您當前的設置（如上所示），會發生以下情況：

• /呈現所需的<h1/>Root Route</h1> 。

• /UploadData呈現<h1>Upload Data Route</h1> ，這也是需要的。
  注意： /UploadData也與/:id和/*路徑匹配，但因為路徑/UploadData對其他路徑更具體，React Router 解析為/UploadData 。

• /1234呈現<h1>Id Route</h1>因為它比/*更具體。

• /foo/bar呈現<h1>Catch All Route</h1> 。

注意：路由順序對於 React Router V6 並不重要，它是匹配路徑的特殊性。

我猜想/foo應該解析為path="/*"路由，但實際上它解析為/:id路由，因為 React Router 不知道你的 ID 是什么。

如果您希望/foo顯示 catchall 組件，您可以測試id路由組件內部id的有效性，如果 id 無效，您可以呈現 catchall 組件。

參考下面的代碼片段：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

const CatchAllComponent = () => <h1>Catch All Route</h1>;
const IdComponent = () => {
  const { id } = useParams();
  const isIdValid = /[0-9]/.test(id);

  if (isIdValid) {
    return <h1>Id Route</h1>;
  } else {
    return <CatchAllComponent />;
  }
};

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<h1>Root Route</h1>} />
        <Route path="/UploadData" element={<h1>Upload Data Route</h1>} />
        <Route path="/:id" element={<IdComponent />} />
        <Route path="*" element={<CatchAllComponent />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);