Question

我正在尝试从路由器发布到的组件中更新路由器。这是带有导航栏和指向各个页面的路线的主页。

class Page extends React.Component {
  render() {
    return (
      <Router>
        <Navbar id="navbar" variant="dark">
          <Navbar.Toggle />
          <Navbar.Collapse className="justify-content-end">
            <Navbar.Text>
              <Link to="/member">Login</Link>
            </Navbar.Text>
          </Navbar.Collapse>
        </Navbar>
        <Route path="/" exact component={LandingPage} />
        <Route path="/member" component={MemberPage} />
        <Route path="/apply" component={Apply} />
      </Router>
    );
  }
}

当我加载LandingPage组件时，我现在拥有以下内容：

class LandingPage extends React.Component {
    render() {
        return (
            <Router>
              <div className="apply">
                <Link to="/apply">Apply Now</Link>
              </div>
            </Router>
        );
    }
}

因此，当我单击链接时，它将URL更改为what.com/apply，但实际页面未更新。我了解这是因为它正在其中查找要更新的路由，但是，如何获取页面以加载下一个组件？

Answer 1

修复很简单，我只需要从LandingPage componenet中删除路由器标签

如何从组件内部更新路由器

1 个答案: