React Router 在路由时将组件放置在特定的 div 中

Question

如何使用 React 路由器将组件放置在特定的 div 中？目前它呈现在页面末尾最后呈现的组件下方 ?

Answer 1

正如你所提到的，你正在使用 react-router v4，你可以将 Route 组件放置在组件中的任何位置，嵌套路由可以写在子组件中

比如

假设你有一个像

这样的组件应用程序

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

现在假设 Roster 组件包含嵌套路由，您可以将 Route 组件放置在任何您想要呈现子路由的地方

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

React Router 在路由时将组件放置在特定的 div 中

React Router place component in a particular div while routing

reactjs

react-router-v4