Подключенный-реагирующий-маршрутизатор и office-ui-fabric-реагируют <Nav>

Question

Связанный пост на Github

В настоящее время мне трудно использовать две библиотеки в моем приложении Reaction-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 и похоже этот роутер хорошо работает с react-router v4, так что я не уверен, как справиться с этой проблемой.

Может ли кто-нибудь дать мне предложение?

Answer 1

Архитектура вашего проекта: Provider > ConnectedRouter > App > Layout (есть NavLink) > Switch > Routes

Вы должны построить архитектуру следующим образом: Provider> ConnectedRouter> файл маршрутов> Switch > Routes > Layout в компоненте

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