时间戳

首页 > 解决方案 > 如何从组件内更新路由器

reactjs - 如何从组件内更新路由器

问题描述

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

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 更改为whatever.com/apply，但实际页面并未更新。我知道这是因为它正在寻找其中的更新路线，但是，如何让页面加载下一个组件？

标签： reactjsreact-router

解决方案

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

推荐阅读