我正在嘗試創建一個包含反應代碼的 Spring Boot 應用程式。我有這樣的 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"
我是不是錯過了什么。
uj5u.com熱心網友回復：
第二條路徑線可能path = "/*"會導致問題。如果 React 按路由順序進行，那么“/*”將捕獲所有路由，而不是處理 /UploadData。
如果這不起作用，我注意到您從“react-router-dom”匯入了兩次 BrowserRouter，可能在第二次將其作為別名“BrowserRouter as Router”匯入時洗掉？
希望這有效！
如果您更改了順序或洗掉了該路徑，它是否有效？
uj5u.com熱心網友回復：
讓我們了解使用不同路徑渲染的組件。
<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顯示包羅萬象的組件，可以測驗路由id組件內部的有效性，id如果 id 無效，則可以渲染包羅萬象的組件。
參考下面的代碼片段：
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")
);
uj5u.com熱心網友回復：
這里的問題是您在同一條路由中有一個通配符路徑"/*"和一個動態路徑"/:id"。
該"/:id"路由是動態路由，因此 React 路由器不關心它是一個實際的 32 位唯一 ID，還是單詞“hello”。因此，它也是通配符路由 ( "/*")，但增加了為您提供id使用useParams鉤子時呼叫的引數的功能。
在您的示例中，由于所有路由都處于同一級別，因此通配符路由將始終獲勝，因為它具有更高的特異性（因為它匹配自身、根路徑和"/"）。只能匹配自己，所以它總是具有較低的特異性。/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）以及如何構建它們的更多資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/464396.html
標籤：javascript 反应 弹簧靴 反应路由器dom
上一篇：由于無法為公共抽象java.util.optional創建查詢而導致創建beanuserController時出錯