Question

我对某些组件使用react，并且我在react根目录之外有一个导航菜单。

我想在单击菜单链接时更改根目录内的react组件。

我搜索并发现react-router是一种解决方案，但我不知道该怎么做。

还请注意，我不想使用哈希网址。

这是我的代码示例

<div class="menu">
<a href="page2">page 2</a>
</div>
<div class="react-root"></div>

我仅将react-root div称为react render。

当我单击第2页时，如何告诉我如何更改组件？是react-router是一个很好的解决方案，如何使用React Router？

Answer 1

使用/admin/的目的通常是使页面不会在用户导航时刷新。如果您将导航链接带入react应用程序，则无需刷新页面即可体验单页应用程序。

否则，您可以拥有以下内容：

react-router

但是更好的方法是这样的：

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"));

这是代码沙箱链接，您可以在其中看到两个之间的区别 https://codesandbox.io/s/holy-wind-olex5?fontsize=14&hidenavigation=1&theme=dark

Answer 2

我通过从这个问题获得帮助来解决了它 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

反应路由器锚链接

2 个答案: