React Router 4 - 组件重新安装而不是重新渲染

Question

我正在设置一个使用 React Router 4 的 React 项目（“react-router-dom”：“^4.3.1”）。我有一个 SideBar 和一个 NavBar，然后是应用程序的主要部分（内容），这取决于路线。我看到的问题是，当我从内容中的组件链接到新组件时，组件会按我的预期呈现，只调用该组件的componentDidMount()。但是，当 SideBar 更改路由时，整个 App 组件会重新挂载，并再次调用其 componentDidMount()。

Root 组件创建 BrowserRouter

<BrowserRouter>
   <Switch>
     <Route path="/login" component={Login}/>
     <Route path="/register" component={Register}/>
     <Route component={App}/>
   </Switch>
</BrowserRouter>

App 然后在路由中创建 SideBar、NavBar 和内容

 render() {
    return (
      <div>
        <NavBar user={this.state.user} market={this.state.market}/>
        <SideBar user={this.state.user} market={this.state.market}/>
        <Route path="/market" render={props => <Market user={this.state.user} market={this.state.market} {...props}/>} exact={true} />
        <Route path="/user" render={props => <User user={this.state.user} market={this.state.market} {...props}/>} exact={true} />
      </div>
    );
  }

当按下市场页面上的按钮时，它会触发以下代码，该代码会立即呈现用户页面（如我所料）。

<Link to={"/user"} className="btn>Link</Link>

当我从 SideBar 链接到此页面时，使用以下代码，它会导致 App 重新挂载，并再次调用 componentDidMount()。

<Link to="/user">

我试图避免在初始调用后调用 App 的 componentDidMount()，因为我将其设置为存储登录用户和其他 init() 类型的东西。我会认为我设置它的方式会发生这种情况，但显然不是。我应该如何更改我的路由器设置才能做到这一点？

Answer 1

事实证明这与 React 无关。我买了一个主题，主题是捕捉鼠标点击并导致页面刷新。当我取消主题的事件时，路由工作正常。

Answer 2

您必须将侧边栏 && 导航栏组件放置在根组件浏览器路由器标签内。因此，当用户登录您的应用程序时，根组件仅加载一次，侧栏和导航栏也加载一次，因此您想要的其他组件将使用 switch 标签加载。 示例。

<BrowserRouter>

            <div>
                <NavBar fetchChannelKey={this.fetchChannelKey} updateActive={this.updateActive} activePage={this.state.activePage} updateRoutes={this.handleUpdate}/>
                <SideBar updateActive={this.updateActive} activePage={this.state.activePage}/>
                <Switch>
                    <Route exact path="/" component={HomeIndex} />
                    <Route path="/home" component={HomeIndex} />
                    <Route path="/customer/:id" component={CustomerIndex} />
                    <Route path="/users/:id" component={UsersIndex} />
                    <switch/>
               <Browser/>
           <div/>