时间戳

首页 > 解决方案 > React路由器更改url但不呈现视图

javascript - React路由器更改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>
        );
    }
}

这是 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 后查看更改）。简而言之-链接不起作用。我做错了什么，我该如何解决？

标签： javascriptreactjsreact-router

解决方案

Router从Header组件中移除。

推荐阅读