react router在路由时将组件放置在特定div中

正如您所提到的,您使用的是react router v4,您可以将route组件放置在组件中的任何位置,嵌套的路由可以写入子组件中

例如

假设你有一个组件应用程序

class App extends React.Component {
    render() {
         return (
              <div>
                  <Navbar/>
                  <Route exact path="/" component={Home} />
                  <Route path ="/roster" component={Roster}
              </div>
         )
    }
}

现在假设花名册组件包含嵌套的路由,则可以将路由组件放置在要呈现子路由的任何位置

const Roster = () => (
    <div>
        <Route exact path="/roster" component={ListComp} />
        <div className="rosterDetails">
            <Route exact path="/roster/:rosterId" component={Details} />
        </div>
    </div>
)