React Router更改url但不呈现视图

时间:2020-04-02 17:44:30

标签: javascript reactjs react-router

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

这是我的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后视图才会更改)。简而言之-链接不起作用。我做错了什么以及如何解决?

1 个答案:

答案 0 :(得分:2)

Router组件中删除Header