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>
        );
    }
}

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

Answer 1

从Router组件中删除Header。

React Router更改url但不呈现视图

1 个答案: