React Router 4 - перемонтирование компонентов вместо повторного рендеринга

Question

Я настраиваю проект React, который использует React Router 4 ("response-router-dom": "^ 4.3.1").У меня есть SideBar и NavBar, а затем основная часть приложения (контент), который меняется в зависимости от маршрута.Проблема, с которой я сталкиваюсь, заключается в том, что, когда я связываюсь с новым Компонентом из Компонента внутри контента, Компонент отображает, как я ожидал, вызывая только этот Компонент 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>

Когда я ссылаюсь на эту страницу с боковой панели, хотя, с помощью следующего кода, приложение перемонтирует приложение и снова вызывает componentDidMount().

<Link to="/user">

Я пытаюсь избежатьКомпонент componentDidMount () приложения всегда вызывается после первоначального вызова, потому что я настроил его для хранения вошедшего в систему пользователя и других вещей типа init ().Я бы подумал, как я это настрою, это произойдет, но, очевидно, это не так.Как мне изменить настройки маршрутизатора, чтобы сделать это?

Answer 1

Оказывается, это не было чем-то связанным с React. Я купил тему, и эта тема захватывает щелчки мыши и вызывает обновление страницы. Когда я снял события темы, маршрутизация работала правильно.

Answer 2

Вы должны поместить компонент боковой панели && navbar внутри тега роутера корневого компонента. Поэтому, когда пользователь входит в ваше приложение, корневой компонент загружается только один раз, боковая панель и панель навигации также один раз, поэтому другой компонент, который вы хотите загрузить, будет загружен с помощью тега-переключателя. Пример.

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