javascript - React router改变url但不渲染 View

Question

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

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

这是标题组件，其中有带链接的菜单:

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 后才能查看更改)。简而言之 - 链接不起作用。我做错了什么以及如何解决它？

Answer 1

从 Header 组件中删除 Router。