Реактивный маршрутизатор меняет URL, но не отображает представление

Question

Я знаю, что здесь много подобных вопросов, но ни один из них не решает мою проблему.

Вот мое приложение. js class:

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, где у меня есть меню со ссылками:

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

Удалить Router из Header Компонент.