将路由反应到端点但不呈现内容

Question

我可以路由到另一个端点，但组件内容仅在手动刷新时出现。

我看到有人问过这个问题here、here，并且我一直在查看reactrouter docs 等。解决方案似乎总是“添加withRouter”或“确保将其包装在Router 中。我已经完成了这些事情，但遗憾的是没有地方。

代码如下：

App.js

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <Provider store={store}>
        <div className="App">
          <NavBar />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/account" component={Account} />
          </Switch>
        </div>
      </Provider>
    </Router>
  );
}

NavBar.js

import { BrowserRouter as Router, Link } from "react-router-dom";
import { withRouter } from "react-router";

function NavBar() {
  return (
    <Router>
      <div className="navbar">
        <h3>Connectory</h3>
        <div className="buttons-container">
          <Link>
            <button>Settings</button>
          </Link>
          <Link to="/account"> // successfully redirects to /account, but doesn't render Account page content until refresh
            <button>Account</button>
          </Link>
        </div>
      </div>
    </Router>
  );
}

export default withRouter(NavBar);

编辑：在评论建议后，here's a code sandbox link 和这里是 Account.js 页面：

import React from "react";

export default function Account() {
  return (
    <div>
      <h3>This is the Account page</h3>
    </div>
  );
}

Answer 1

这里的问题是，在您的 Navbar.js 中，当您已经在 App.js 中设置了路由时，您正在重新设置它们。

  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/account" component={Account} /> // Route for Applicatin set here
  </Switch>

您无需再次执行此操作。请在此处查看。

https://codesandbox.io/s/gracious-germain-7fyry?file=/src/Navbar.js

您的 Nabar 应如下所示：

function NavBar() {
  return (
    <div className="navbar">
      <h3>Connectory</h3>
      <div className="buttons-container">
        <Link to="/">
          <button>Settings</button>
        </Link>
        <Link to="/account">
          <button>Account</button>
        </Link>
      </div>
    </div>
  );
}

Answer 2

您好，我在您的代码中发现了一个错误，这就是原因，因为它不起作用。

在此组件中，您将路由器注入应用程序的其余部分。

    function App() {
  return (
    <Router>
      <div className="App">
        <NavBar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/account" component={Account} />
        </Switch>
      </div>
    </Router>
  );
}

在这个中，您将再次注入路由器。这就是为什么不起作用的原因，您只需从 de Navbar 中删除路由器，它就会正常工作。

    function NavBar() {
  return (
    <Router>
      <div className="navbar">
        <h3>Connectory</h3>
        <div className="buttons-container">
          <Link>
            <button>Settings</button>
          </Link>
          <Link to="/account">
            <button>Account</button>
          </Link>
        </div>
      </div>
    </Router>
  );
}

喜欢这个

 function NavBar() {
  return (
      <div className="navbar">
        <h3>Connectory</h3>
        <div className="buttons-container">
          <Link>
            <button>Settings</button>
          </Link>
          <Link to="/account">
            <button>Account</button>
          </Link>
        </div>
      </div>
  );
}