Connected-React-router 和 Office-UI-Fabric-react <Nav>

Question

Github 上的相关帖子

目前，我很难正确使用react redux应用程序中的两个库。

我的代码看起来像：

index.js

import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
...
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>,
rootElement
);

App.js

...
export default () => (
<Layout>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/test" component={Test} />
</Switch>
</Layout>
);

布局.js

...
export default function Layout(props) {
return (
<div class="ms-Fabric">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-lg2">
<Navigation />
</div>
<div class="ms-Grid-col ms-lg10">{props.children}</div>
</div>
</div>
);
}

Navigation.js

import React from 'react';
import { withRouter } from 'react-router-dom';
import { Nav } from 'office-ui-fabric-react';
export default withRouter(({ history }) => (
<div className="ms-NavExample-LeftPane">
<Nav
onLinkClick={(event, element) => {
event.preventDefault();
history.push(element.url);
}}
groups={[
{
links: [
{
name: 'Home',
url: '/',
key: 'home'
},
{
name: 'Test',
url: '/Test',
key: 'test'
}
]
}
]}
/>
</div>
));

然而，当我运行应用程序时，它显示You should not use <Route> outside a <Router>。导航当然在ConnectedRouter中，而且这个路由器似乎与react-routerv4配合得很好，所以我不知道如何处理这个问题。

有人能给我一个建议吗？

Answer 1

项目的架构：提供商>连接路由器>应用程序>布局(具有NavLink(>交换机>路由

您必须以这种方式构建体系结构：提供商>ConnectedRouter>路由文件>交换机>路由>组件中的布局

// index.js
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import routes from 'routes/index';
import store from 'store/configureStore';
render(
<Provider store={store}>
<ConnectedRouter history={history}>
{routes}
</ConnectedRouter>
</Provider>,
document.getElementById('root'),
);
// routes.js
const routes = (
<Switch>
<Route exact path="/" component={Home} />
<Route path="/test" component={Test} />
</Switch>
);
export default routes;