Javascript 反应路由器更改url，但不更改'；不要渲染视图

我知道这里有很多类似的问题，但没有一个能解决我的问题

下面是我的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>
        );
    }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}

这是Header组件，其中有带有链接的菜单：

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

类头扩展React.Component
{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
登录
登记
排名
论坛
)
}
}

---

我的问题是：当我单击标题部分中的链接时，浏览器中的URL会更改，但不会呈现组件（只有在刷新页面或手动写入URL后视图才会更改）。简言之，链接根本不起作用。我做错了什么以及如何修复它？

从

头
组件中删除
路由器
。
从
头
组件中删除
路由器
。
是否需要将链接包含在路由器组件中？您可以尝试删除标头的封闭路由器组件。是否需要用路由器组件封闭链接？您可以尝试删除标头的封闭路由器组件。是！谢谢，是的！非常感谢。