React 路由器更改 url 但不呈现视图

Question

I know there are lots of similar questions here, but none of them solve my problem.

Here's my App.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>
        );
    }
}

And here's Header component, where I have menu with 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>
        )
    }
}

My problem is: when I click the Link in Header section, URL in the browser changes, but is doesn't render component (view changes only after refreshing the page or write URL manually). In brief - Links just doesn't work. What I did wrong and how can I fix it?

Answer 1

从Header组件中删除Router 。