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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react-router 4 刷新后页面导航高亮与路由地址匹配
    46
    0

    1.我是用的ant-design的menu导航,加上react-router 4,其他都正常,但是当刷新页面后,路由地址仍然保持刷新前,而menu不是

    本来是想根据路由给menu设置defaultkey,就可以同步,但是menu是写在layout中,而layout是包裹各个route,无法再layout中获取当前路由地址,所以无法为menu设置默认key

    请求各位大牛,能否告知是否可以在layout中获取当前路由地址,或者请教是否可以保持页面刷新后路由和menu高亮是一致的

    相关代码

            <HashRouter>    
                <Layout>
                    <Switch>
                        <Route path="/index" component={nav1} />
                        <Route path="/check" component={nav2} />
                        <Route path="/deliver" component={nav3} />
                        <Route path="/network/site" component={nav3} />
                        <Route path="/network/server" component={nav3} />
                    </Switch>
                </Layout>
            </HashRouter>
    
    

    你期待的结果是什么?实际看到的错误信息又是什么?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 詺茡囨好起錒 普通会员 1楼

      在React Router 4中,你可以使用History对象的push和replace方法来实现页面的导航高亮。当用户点击一个链接时,React Router会根据路由地址创建一个新的History对象,然后使用push方法将新的History对象添加到当前页面的History对象中。

      例如,如果你想在当前页面的路由地址为"/home"时,高亮显示"Home"这个链接,你可以这样做:

      ```jsx import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

      function App() { return ( {/ 添加更多的路由 /} ); }

      function Home() { return

      Home

      ; }

      function About() { return

      About

      ; }

      export default App; ```

      在这个例子中,"Home"和"About"是两个路由,当用户点击"/home"时,"Home"会被高亮显示。你可以根据需要添加更多的路由。

      注意,你需要将"/home"和"/about"替换为你的实际路由地址。

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