connected-react-路由器和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>
);

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和it seems中，这个路由器与react-router v4工作得很好，所以我不确定如何处理这个问题。

有人能给我提个建议吗？

Answer 1

项目架构: Provider > ConnectedRouter > App > Layout (have NavLink) > Switch > Routes

你必须这样构建架构: Provider > ConnectedRouter > routes file > Switch > Routes > Layout in component

​

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

​