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

debugcn 发表于 Dev

基里尔

我正在使用 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 只能在内部使用我该如何处理？

开发者馆

这是工作代码。正如其他人所解释的那样，您应该使用一个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>
    );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。