反应路由器4 - 组件重新安装而不是重新渲染

Question

我正在建立一个使用React Router 4的React项目（“react-router-dom”：“^ 4.3.1”）。我有一个SideBar和一个NavBar，然后是app（内容）的主要部分，它根据路线而变化。我看到的问题是，当我从内容中的Component链接到一个新的Component时，Component会像我期望的那样呈现，只调用Component的componentDidMount()。当SideBar改变路线时，整个应用程序组件重新安装，并再次调用其componentDidMount()。

Root组件创建BrowserRouter

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

然后，应用程序在路径中创建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

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

<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/>

Answer 2

事实证明它与React没有任何关系。我买了一个主题，主题是抓住鼠标点击并导致页面刷新。当我取消主题的事件时，路由工作正常。