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

Question

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

我在这里、这里看到过这个问题，并且我一直在查看reactrouter 文档等。解决方案似乎总是“添加withRouter”或“确保您将其包裹在Router.

这是代码：

应用程序.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>
  );
}

导航栏.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);

编辑：评论建议后，这里是代码沙箱链接，这里是Account.js页面：

import React from "react";

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

标签： javascriptreactjsreact-routerreact-router-dom

Answer 1

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

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

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