Question

我正在建立一个使用React Router 4的React项目（“ react-router-dom”：“ ^ 4.3.1”）。我有一个SideBar和NavBar，然后是应用程序的主要部分（内容），该部分随路线而变化。我看到的问题是，当我从内容中的组件链接到新组件时，该组件将按照我的期望进行渲染，仅调用该组件的componentDidMount()。但是，当补充工具栏更改路线时，将重新安装整个应用程序组件，并再次调用其componentDidMount()。

根组件创建BrowserRouter

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

然后，应用程序会在路线中创建边栏，导航栏和内容

 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>

但是，当我从补充工具栏链接到此页面时，使用以下代码，它将导致应用重新安装，并再次调用componentDidMount()。

<Link to="/user">

我试图避免在初次调用后再调用App的componentDidMount（），因为我将其设置为存储已登录的用户以及其他init（）类型的东西。我想我会以这种方式设置它，但确实没有。我应该如何更改路由器设置来做到这一点？

Answer 1

您必须将侧栏&& navbar组件放置在root componenet浏览器路由器标签内。因此，当用户登录您的应用程序时，根组件仅加载一次，边栏和导航栏也加载一次，因此您要使用的其他组件将使用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/>

Answer 2

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

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

2 个答案: