如何在没有刷新页面的情况下使用office UI结构进行导航?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (43)

我正在使用Office UI Fabric来创建具有不同视图的应用程序。

navbar.js:

import React, { Component } from 'react';
import { Nav } from 'office-ui-fabric-react/lib/Nav';

export default class NavBar extends Component {

  render() {
    return (
      <Nav
        groups={[
          {
            links: [
              { name: 'Home', key: 'Home', url: '/' },
              { name: 'Activity', key: 'Activity', url: '/activity' },
              { name: 'News', key: 'News', url: '/news' },
              { name: 'Documents', key: 'Documents', url: '/documents' }
            ]
          }
        ]}
      />
    );
  }
}

问题是,当我点击NavBar的项目时,页面将刷新并加载该路线中的整个视图。我如何只重新加载组件,而不是整个页面?

这是App.js渲染返回中的路由部分:

<div className="body">
    <NavBar />
    <Router>
      <div style={{ flex: 1}}>
       {routes.map((route, index) => (
         <Route
           key={index}
           path={route.path}
           exact={route.exact}
           component={route.main}
         />
       ))}
      </div>
   </Router>
</div>

我有以下路线:

const routes = [
  {
    path: "/",
    exact: true,
    main: () => <Home />
  },
  {
    path: "/activity",
    exact: true,
    main: () => <Activity />
  },
  {
    path: "/news",
    exact: true,
    main: () => <News/>
  },
  {
    path: "/documents",
    exact: true,
    main: () => <Documents />
  }
];
提问于
用户回答回答于

在每个项目中使用onClick,并使用传统的e.pretectionDefault来停止默认行为。

所属标签

可能回答问题的人

  • 嗨喽你好

    7 粉丝480 提问9 回答
  • 富有想象力的人

    3 粉丝0 提问7 回答
  • uncle_light

    5 粉丝518 提问6 回答
  • 人生的旅途

    10 粉丝484 提问6 回答

扫码关注云+社区

领取腾讯云代金券