我知道这里有很多类似的问题,但是没有一个能解决我的问题。
这是我的App.js类:
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Header}/>
<Route path="/login" component={Login}/>
<Route path="/register" component={Register}/>
<Route path="/ranking" component={Ranking}/>
<Route path="/forum" component={Forum}/>
</Switch>
</Router>
</div>
);
}
}
这是Header组件,其中有带有Links的菜单:
class Header extends React.Component
{
constructor(props) {
super(props);
}
render() {
return (
<div className="header">
<div className="menu">
<Router>
<div className="option"><Link to="/login">Login</Link></div>
<div className="option"><Link to="/register">Register</Link></div>
<div className="option"><Link to="/ranking">Ranking</Link></div>
<div className="option"><Link to="/forum">Forum</Link></div>
</Router>
</div>
</div>
)
}
}
我的问题是:当我单击“页眉中的链接”部分时,浏览器中的URL会更改,但不会呈现组件(仅在刷新页面或手动编写URL后视图才会更改)。简而言之-链接不起作用。我做错了什么以及如何解决?
答案 0 :(得分:2)
从Router
组件中删除Header
。