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

Question

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

我在这里看到过这个问题，在这里，我一直在查看反应堆文档，在其他文档中。解决方案似乎总是"添加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);

编辑:在评论建议之后，这里是一个代码沙箱链接，这里是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

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

在这个组件中，你要把Router注入到应用的其余部分。

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

在这里你再次注入了Router。这就是为什么不能工作，你只需要从导航栏中删除Router，它就会正常工作。

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