我正在使用Office UI Fabric创建具有不同 View 的应用程序。
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' }
]
}
]}
/>
);
}
}
在 App.js 中,我只是返回 和 。 问题是,当我单击导航栏的项目时,页面将刷新并加载该 route 的整个 View 。如何仅重新加载组件而不是整个页面?
<小时/>这是 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 />
}
];
页面正在工作,但是如果我单击一个导航栏项目,然后仅渲染目标组件,如何使用它来指定导航栏项目?
最佳答案
我找到了答案: https://github.com/OfficeDev/office-ui-fabric-react/issues/915
我在每个项目中使用 onClick 并使用传统的 e.preventDefault 来停止默认行为
关于reactjs - react : how to navigation without refresh page using office UI fabric,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51524316/