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

【问题标题】：React-router v4 updates url but doesn't render componentReact-router v4 更新 url 但不渲染组件
【发布时间】：2018-07-26 14:59:59
【问题描述】：

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

【问题讨论】：

首先，您应该删除 NavBar 中的 BrowserRouter，然后将这个 Navbar 组件移动到您的 MainPage 中，并将其放在类名为“MainPage”的 div 中，但在 BrowserRouter 上方。希望它有效
你在哪里渲染你的导航栏
我更改了 MainPage 组件中的代码并从 Navbar 中删除了 BrowserRouter，并在 BrowserRouter 上方的主页 div 中添加了 Navbar，但现在反应告诉我 - 你不应该在之外使用跨度>

标签： javascript reactjs react-router

【解决方案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>
    );
  }
}

【讨论】：

【解决方案2】：

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

如果您有一个同时呈现Navbar 和MainPage 的App 组件，那么您可以将路由器移动到该组件中：

export default class App extends Component {
    render() {
        return (
            <BrowserRouter>
              <div className="AppContainer">
                <Navbar />
                <MainPage />
              </div>
            </BrowserRouter>
        );
    }
}

【讨论】：

我更改了 MainPage 组件中的代码并从 Navbar 中删除了 BrowserRouter，并在 BrowserRouter 上方的主页 div 中添加了 Navbar，但现在反应告诉我 - 你不应该在之外使用跨度>
Navbar 和 MainPage 是如何渲染的？是否还有其他组件正在渲染 Navbar 和 MainPage？
他们在 App 组件中渲染，首先是，然后是