4

I'm using Office UI Fabric to create app with different views.

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' }
            ]
          }
        ]}
      />
    );
  }
}

and in App.js, I just return and . The problem is, when I click on the item of NavBar, the page will refreshed and load the whole view in that route. How I can reload just the component, not the whole page?

Here's the routing part in the App.js render return:

<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>

and I have the routes like:

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 />
  }
];

And the page is working, but how I can use to specify the Nav bar items if I click on one, then just render the target component?

Jie Hu
  • 539
  • 1
  • 5
  • 16
  • 2
    Have you looked into adding react-router to your app? https://reacttraining.com/react-router/web/guides/quick-start. From what I can tell fabric won't handle your routing for you. – Michael Sorensen Jul 25 '18 at 17:27
  • I've just added the part for router. But how I can add the to some properties like url or path in the Navbar items? – Jie Hu Jul 25 '18 at 17:54
  • It looks like the Nav component will just generate anchor tags with simple hrefs. I think the best solution in this case is just include components from react-router inside your and do away with the groups entirely if it's not necessary. I don't think Fabric can be aware of React-Router thus causing this issue. – Michael Sorensen Jul 25 '18 at 18:14

2 Answers2

1

I found the answer: https://github.com/OfficeDev/office-ui-fabric-react/issues/915

I use the onClick in each item and I use the traditional e.preventDefault to stop the default behavior

Jie Hu
  • 539
  • 1
  • 5
  • 16
  • This link got it working for me, specifically the code sample at: https://github.com/OfficeDev/office-ui-fabric-react/issues/915#issuecomment-429488589 – James Love Sep 28 '19 at 18:15
0

import { Redirect } from 'react-router';

and

Return <Redirect to='/path_name' />;
Vinoth Kumar
  • 3
  • 3