代码之家 › 专栏 › 技术社区 › user581157

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

react-router-v4 reactjs

user581157 · 技术社区 · 6 年前

使用react router如何在特定div中放置组件?当前它呈现在页面末尾最后一个呈现的组件下面?

1 回复 | 直到 6 年前

Shubham Khatri 6 年前

正如您所提到的,您使用的是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>
)

推荐文章