[英]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.