- 25
- 0
在vue中,可以通过<router-view />实现把子组件嵌套在父组件中的任意位置,但是在react中怎样实现呢?初学react,求指教!
如下react代码
Layout.js
import React from 'react'
const Layout = () =>(
<div>
<div>header</div>
我想把子组件嵌套在这个位置
<div>footer</div>
</div>
)
export default Layout
ChildOne.js
...省略一部分
<div>子组件 1</div>
ChildTwo.js
...省略一部分
<div>子组件 2</div>
路由:
<Router>
<Fragment>
<Route path='/' component={Layout}/>
<Route path='/one' component={ChildOne}/>
<Route path='/two' component={ChildTwo}/>
</Fragment>
</Router>
路由这么写,子组件只会放在Layout组件的最后面显示。
- 共 0 条
- 全部回答
-
相忘于江湖う 普通会员 1楼
在React Router 4中,我们可以使用以下方法实现嵌套的路由:
- 使用
withRouter组件:这是React Router 4的一个新特性,可以让我们在子路由中使用withRouter组件。这个组件可以提供一些额外的功能,如重定向、跳转、导航。
jsx function App() { return ( <Router> <WithRouter> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </WithRouter> </Router> ); }在这个例子中,
Home组件是一个默认的子路由,当用户访问/时,会渲染Home组件。About组件是一个默认的子路由,当用户访问/about时,会渲染About组件。- 使用
createHashHistory:这个函数可以创建一个新的History对象,这样在路由之间切换时,不会重新渲染整个页面。
jsx function App() { return ( <Router> <HashHistory /> <WithRouter> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </WithRouter> </Router> ); }在这个例子中,
Home组件是一个默认的子路由,当用户访问/时,会渲染Home组件。About组件是一个默认的子路由,当用户访问/about时,会渲染About组件。- 使用
history.push()和history.pushState():这两个方法可以用来在路由之间切换。history.push()会将当前页面的URL传递给下一个路由,history.pushState()会将当前页面的URL以及状态数据传递给下一个路由。
jsx function App() { return ( <Router> <HashHistory /> <WithRouter> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </WithRouter> <History.pushState({ name: 'myPage', url: '/about' }, 'About'); </Router> ); }在这个例子中,
Home组件是一个默认的子路由,当用户访问/时,会渲染Home组件。About组件是一个默认的子路由,当用户访问/about时,会渲染About组件。然后,我们使用History.pushState()方法,将当前页面的URL和状态数据传递给/about路由,这样用户在/about页面上就可以看到Home组件的前一个页面。 - 使用
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

