账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react router4 嵌套怎样实现?
    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
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 相忘于江湖う 普通会员 1楼

      在React Router 4中,我们可以使用以下方法实现嵌套的路由:

      1. 使用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组件。

      1. 使用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组件。

      1. 使用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组件的前一个页面。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部