Question

我有这样的路线：

<Provider store={store}>
    <BrowserRouter>
        <Route path="/"  component={App} />
        <Route path="/customers" component={Customers} />
        <Route path="/tickets" component={Tickets} />
    </BrowserRouter>
</Provider>

当路线为/customers时，我希望Customers组件位于内部 App组件。当路线为/tickets时，我要Tickets 内 App，而不要Customers。我可以使用

检查路线

this.props.location.pathname == '/customers'，但这就是路由器的用途，对吗？我不应该检查路线和渲染。

根据我的上述路线，我看到Customers组件下方 App，而不是内部。

App由标题和内容组成。我不想将标头代码添加到我的所有组件中。

App.js：

     <Header style={{ height: '39px', lineHeight: '39px' }}>
       <Link to="/home">
         <div className="logo" style={{ float: 'left' }}>
           <img src="" />
           <h2>Appnam</h2>
         </div>

       </Link>
       {navEl}
  </Header>
  <Content >
     // Customer or Tickets component here based on route
  </Content>

如何根据路线在App内渲染组件。

Answer 1

假设您以应用程序为主要组件，并且希望票证和客户组件包含在应用程序组件中，则可以使用嵌套路线

<Provider store={store}>
    <BrowserRouter>
        <Route path="/"  component={App} />
    </BrowserRouter>
</Provider>

内部应用程序组件

class App extends React.Component {
   render() {
       return (
          <div>
             {/* rest of App code */} 
             <Route path="/customers" component={Customers} />
             <Route path="/tickets" component={Tickets} />
          </div>
       )
   }
}

如何根据路线在组件内部渲染组件

1 个答案: