4

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

导航栏.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' }
            ]
          }
        ]}
      />
    );
  }
}

在 App.js 中，我只返回和 . 问题是，当我单击 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 />
  }
];

该页面正在运行，但是如果我单击一个，我如何使用它来指定导航栏项目，然后只渲染目标组件？

4

2 回答 2

1

我找到了答案： https ://github.com/OfficeDev/office-ui-fabric-react/issues/915

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

于 2018-07-25T22:44:33.007 回答
0

从'react-router'导入{重定向}；

和

Return <Redirect to='/path_name' />;
于 2018-10-11T06:20:36.090 回答