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

当我使用链接时，它会更新浏览器中的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>
        );
    }
}

我已经尝试了所有方法，甚至使用Router（Component），但是它说到路由器只能在内部使用我该如何处理？

Answer 1

您的树中应该只有一个BrowserRouter组件。 BrowserRouter组件保留路由器用来将URL与呈现的路由同步的共享状态。根据您的情况，您将获得两种不同的路由器状态版本，因为您渲染了两个BrowserRouter组件，因此您可能应该在组件树中更高的某个位置渲染单个BrowserRouter组件。

如果您有一个同时呈现App和Navbar的{{1}}组件，则可以将路由器移到该组件中：

MainPage

Answer 2

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

React-Router V4更新URL但不渲染组件

2 个答案: