[英]React router anchor link
我對某些組件使用了 react,並且在 react 根目錄外有一個導航菜單。
當我單擊菜單鏈接時,我想更改根內的反應組件。
我搜索並看到react-router
是一個解決方案,但我不知道該怎么做。
另請注意,我不想使用哈希網址。
這是我的代碼示例
<div class="menu">
<a href="page2">page 2</a>
</div>
<div class="react-root"></div>
我只為react-root
div 調用 react 渲染。
當我點擊第 2 頁時,如何告訴 React 更改組件? react-router 是一個很好的解決方案,我如何使用 react router 做到這一點?
使用react-router
目的通常是在用戶導航時不刷新頁面。 如果您將導航鏈接帶入 React 應用程序,您將無需刷新頁面即可體驗單頁應用程序。
否則,你可以有這樣的事情:
import React from "react";
import ReactDOM from "react-dom";
import { Route, BrowserRouter as Router } from "react-router-dom";
const App = () => <div>Home Page</div>;
const App2 = () => <div>Page 2</div>;
const routing = (
<Router>
<div>
<Route exact path="/" component={App} />
<Route path="/page2" component={App2} />
</div>
</Router>
);
ReactDOM.render(routing, document.getElementById("react-root"));
但更好的方法是這樣的:
const App = () => <div>Home Page</div>;
const App2 = () => <div>I am Page 2</div>;
const routing = (
<Router>
<div class="menu">
<Link to="/">Home Page</Link>
<Link to="/page2">Page 2</Link>
</div>
<div>
<Route exact path="/" component={App} />
<Route path="/page2" component={App2} />
<Route path="/page3" component={App} />
</div>
</Router>
);
ReactDOM.render(routing, document.getElementById("react-root"));
這是代碼沙箱鏈接,您可以在其中查看兩個https://codesandbox.io/s/holy-wind-olex5?fontsize=14&hidenavigation=1&theme=dark之間的區別
我通過從這個問題中獲得幫助解決了這個問題How to get history on react-router v4?
這是我的代碼
document.getElementById("test").onclick = function(e){
e.preventDefault();
history.push("/page2")
}
它正在工作!
https://codesandbox.io/s/inspiring-goldberg-utryd?fontsize=14&hidenavigation=1&theme=dark
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.