React Router: один компонент маршрутизатора точно другой другой не точно

Question

этот компонент моего приложения со всеми маршрутами

 render() {

    return (    

    < BrowserRouter >

      <div className="App">                 

         <FuncFact />           

         <Route exact path="/" component = {Anime} />

         <Route  exact path="/Controls"  component= {Controls} />

         <Route exact path="/Profile" component= {Profile} />

         <Route exact path="/People"   component = {People} />

         <Route exact path="/Inbox"   component = {ChatApp} />


       </div>

    </ BrowserRouter >

    )
  }
}

export default App;

все эти компоненты отображаются как компонент "одиночный и единственный", но я хочу также отображать компонент входящих сообщений наряду с другими некак точно это сделать

Answer 1

Вы хотите визуализировать компонент <ChatApp> не как маршрут (как вы делаете с <FuncFact>) и показать его условно.

<BrowserRouter>
    <div className="App">
         <FuncFact />           
         <Route exact path="/" component = {Anime} />
         <Route exact path="/Controls"  component= {Controls} />
         <Route exact path="/Profile" component= {Profile} />
         <Route exact path="/People"   component = {People} />
         <ChatApp style={{display: this.state.showInbox ? 'block' : 'none'}} />
    </div>
</BrowserRouter>

Затем установите свойство состояния showInboxtrue с использованием this.setState(), когда пользователь выполняет действие, которое должно вызвать отображение компонента <ChatApp>.Вам может потребоваться передать действие через ваши компоненты или использовать контейнер состояния, такой как Redux.