我要創建一個利用 react-router-dom 的應用程式。我目前正在嘗試使用 5.2.0 版本。我試圖隔離問題并專注于使路由作業但尚未成功。我使用 npx create-react-app 制作了該應用程式。
包.json
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
應用程式.js
import React from "react";
import { Route } from "react-router-dom";
import { withRouter } from "react-router-dom";
import { Switch } from "react-router-dom";
import { BrowserRouter} from "react-router-dom";
import { About, Contact, Home } from "./Components";
function App() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/contact" component={withRouter(Contact)}/>
<Route exact path="/about">
<About/>
</Route>
<Route path="/">
<Home/>
</Route>
</Switch>
</BrowserRouter>
);
}
export default App;
組件.js
import React from "react";
import { useHistory } from "react-router-dom";
const Links = () => {
const history = useHistory();
const buttonClicked = (link) => {
history.push(link);
}
return(
<>
<button onClick={() => buttonClicked('/')}>home</button>
<button onClick={() => buttonClicked('/about')}>about</button>
<button onClick={() => buttonClicked('/contact')}>contact</button>
</>
)
}
export const Contact = () => {
return(
<div>
<Links/>
Contact page
</div>
)
}
export const Home = () => {
return(
<div>
<Links/>
Home page
</div>
)
}
export const About = () => {
return(
<div>
<Links/>
About page
</div>
)
}
我曾嘗試在各個地方使用 withRouter，但均未成功。我還更改了路由的撰寫方式，以包含確切路徑和非確切路徑，因此不確定是什么導致了問題。
這是我當前的代碼。單擊按鈕時，URL 會相應更改。但是，組件不會使用正確的路由再次呈現。如果您能提供幫助，我將不勝感激。
uj5u.com熱心網友回復：
我認為你應該使用 useNavigate 而不是 useHistory
import React from "react";
import { useNavigate } from "react-router-dom";
const Links = () => {
const navigate = useNavigate();
const buttonClicked = (link) => {
navigate(link);
}
return(
<>
<button onClick={() => buttonClicked('/')}>home</button>
<button onClick={() => buttonClicked('/about')}>about</button>
<button onClick={() => buttonClicked('/contact')}>contact</button>
</>
)
}
uj5u.com熱心網友回復：
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; ... <Router> ...code </Router>
嘗試將 browserRouter 匯入為路由器
uj5u.com熱心網友回復：
我認為問題在于您正在使用按鈕進行路由。useHistory的檔案說它可以用于通過鉤子進行路由，但我沒有看到任何建議它可以與 BrowserRouter 結合使用。如果這不正確，其他人可以隨時糾正我。
就個人而言，我使用 Link 組件，然后根據需要對其進行樣式設定。
import { Link } from 'react-router-dom';
<Link to="/path-you-want">Text For Link</Link>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/472687.html
標籤：javascript 反应 反应式 反应钩子 反应路由器dom
上一篇：如何在reactjs中反轉單擊的串列項onclick
下一篇：一鍵更改兩種狀態