javascript - React-router v4 更新 url 但不渲染组件

Question

我使用的是react-router v4，没有redux。代码示例如下:

class MainPage extends Component {
    render() {
        return (
            <div className="MainPage">
              <BrowserRouter>
                <Switch>
                  {/* <Route exact path='/' /> */}
                  <Route path='/signin' component={SignIn}/>
                  <Route path='/signup' component={SignUp} />
                  <Redirect from='*' to='/' />
                </Switch>
              </BrowserRouter>
            </div>
        );
    }
}

当我使用 Link 时，它会更新浏览器中的 URL，但不会呈现任何内容，也不会发生任何情况。当我刷新时，一切都变得很好并且组件呈现；

export default class Navbar extends Component {
    render() {
        return (
            <div className="navbar">
              <BrowserRouter>
                <div>
                    <Link to='/signin'>Sign in</Link>
                    <Link to='/signup'>Sign up</Link>
                </div>
              </BrowserRouter>
            </div>
        );
    }
}

我已经尝试了一切，甚至 withRouter(Component)，但它说 with router 只能在内部使用我该如何处理这个问题？

Answer 1

这是工作代码。正如其他人所解释的，您应该使用一个 BrowserRouter。如果您想始终渲染您的 Navbar 组件，那么您应该将其放置在 Switch 上方，但位于 BrowserRouter 下方，因此您需要 Link 那里。

const Navbar = () => (
      <div className="navbar">
            <Link to='/signin'>Sign in</Link>
            <Link to='/signup'>Sign up</Link>
      </div>
);

class MainPage extends React.Component {
  render() {
    return (
      <div className="MainPage">
        <BrowserRouter>
            <div>
                <Navbar />
                <Switch>
                    {/* <Route exact path='/' /> */}
                    <Route path='/signin' component={SignIn} />
                    <Route path='/signup' component={SignUp} />
                    <Redirect from='*' to='/' />
               </Switch>
            </div>
        </BrowserRouter>
      </div>
    );
  }
}