更新自"react-router-dom": "^5.1.2"到"react-router-dom": "^6.3.0"
應用程式有幾個Context.Providersjust outside BrowserRouter，一個 404 路由，以及幾個頁面的一些隱式嵌套路由（用pathnot表示exact path）
代碼：
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { BrowserRouter, Routes, Route } from "react-router-dom";
ReactDOM.render(
<App/>,
document.getElementById('root')
);
./components/App.js
import React, { useState } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import TierA from "./TierA"
import TierB from "./TierB"
import Catalogue from "./Catalogue"
import Admin from "./Admin"
import NotFound from "./NotFound" // this is the 404 page component
import PlayerContext from "./Player/context"
import SearchContext from "./Search/context"
import { useSearch } from "../hooks/useSearch"
const App = () => {
const searchText = useSearch()
const [playerItem, setPlayerItem] = useState(null)
return (
<React.Fragment>
<SearchContext.Provider value={searchText}>
<PlayerContext.Provider value={{ playerItem, setPlayerItem }}>
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Routes>
<Route element={TierA} exact path="/a_tier" />
<Route element={TierB} exact path="/b_tier" />
<Route element={Catalogue} path="/catalogue" />
<Route element={Admin} path="/admin" />
<Route element={NotFound} path="*" />
</Routes>
</BrowserRouter>
</PlayerContext.Provider>
</SearchContext.Provider>
</React.Fragment>
)
}
export default App;
在更新到 react-router-dom v6 之前，舊版本用于在命中基本/路由時渲染 404 頁面，并且命名路由正確渲染。
現在，點擊上面的任何路線都會顯示一個空白頁面，控制臺中沒有突出的警告或錯誤請告知，提前謝謝
使用 npm start 運行
"scripts": {
"start": "react-scripts start",
...
uj5u.com熱心網友回復：
在組件 API/語法中發生了顯著變化react-router-dom@6。道具需要一個Route，又名 JSX。將 React 組件作為 JSX 傳遞。elementReactNode
例子：
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Routes>
<Route element={<TierA />} path="/a_tier" />
<Route element={<TierB />} path="/b_tier" />
<Route element={<Catalogue />} path="/catalogue" />
<Route element={<Admin />} path="/admin" />
<Route element={<NotFound />} path="*" />
</Routes>
</BrowserRouter>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/491005.html
標籤：javascript 反应 反应路由器 反应路由器dom
上一篇：如何重用閉包函式，將其分配給JavaScript中的變數或常量
下一篇：POSThttps://localhost:5000/storednet::ERR_SSL_PROTOCOL_ERROR