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>

然后，当用户执行应导致显示showInbox组件的操作时，使用true将this.setState()状态属性设置为<ChatApp>。您可能需要通过组件传递操作，或者使用Redux之类的状态容器。

React Router：路由器一个组件完全相同，其他不完全相同

1 个答案: