connected-react-router and office-ui-fabric-react

Related post on Github

Currently I have a hard time using the two libraries in my react-redux app correctly.

My codes look like:

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>

));

However, when I run the app it shows You should not use <Route> outside a <Router>. The navigation is certainly in the ConnectedRouter and it seems this router works well with react-router v4 so I'm not sure how to deal with this problem.

Could anyone please give me a suggestion?

edited Nov 24 '18 at 18:39

asked Nov 24 '18 at 9:06

K. Makino

360312

add a comment |

Related post on Github

Currently I have a hard time using the two libraries in my react-redux app correctly.

My codes look like:

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>

));

Could anyone please give me a suggestion?

edited Nov 24 '18 at 18:39

asked Nov 24 '18 at 9:06

K. Makino

360312

add a comment |

Related post on Github

Currently I have a hard time using the two libraries in my react-redux app correctly.

My codes look like:

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>

));

Could anyone please give me a suggestion?

edited Nov 24 '18 at 18:39

asked Nov 24 '18 at 9:06

K. Makino

360312

Related post on Github

Currently I have a hard time using the two libraries in my react-redux app correctly.

My codes look like:

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>

));

Could anyone please give me a suggestion?

javascript reactjs office-ui-fabric connected-react-router

edited Nov 24 '18 at 18:39

asked Nov 24 '18 at 9:06

K. Makino

360312

edited Nov 24 '18 at 18:39

asked Nov 24 '18 at 9:06

K. Makino

360312

edited Nov 24 '18 at 18:39

asked Nov 24 '18 at 9:06

K. Makino

360312

asked Nov 24 '18 at 9:06

K. Makino

360312

asked Nov 24 '18 at 9:06

K. Makino

360312

add a comment |

1 Answer
1

active

oldest

votes

The architecture of your project:
Provider > ConnectedRouter > App > Layout (have NavLink) > Switch > Routes

You have to build architecture in this way:
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;

answered Nov 25 '18 at 20:03

community wiki

vac9

Thanks for your answer, but where in your example can I put the layout?

– K. Makino
Nov 27 '18 at 5:08

You can use pattern HOC and use it in routes file. Example: <Route path="/test" component={Layout(Test)} />. Or put Layout in component.

– vac9
Nov 27 '18 at 16:34

Sorry for the delay in the reply. I tried HOC method but it gives Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. and am not sure how to use the other one. Could you please clarify it?

– K. Makino
Dec 12 '18 at 1:32

You need pass all props. Read this article medium.com/@soorajchandran/…

– vac9
Dec 12 '18 at 9:02

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53456712%2fconnected-react-router-and-office-ui-fabric-react-nav%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

The architecture of your project:
Provider > ConnectedRouter > App > Layout (have NavLink) > Switch > Routes

You have to build architecture in this way:
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;

answered Nov 25 '18 at 20:03

community wiki

vac9

Thanks for your answer, but where in your example can I put the layout?

– K. Makino
Nov 27 '18 at 5:08

You can use pattern HOC and use it in routes file. Example: <Route path="/test" component={Layout(Test)} />. Or put Layout in component.

– vac9
Nov 27 '18 at 16:34

Sorry for the delay in the reply. I tried HOC method but it gives Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. and am not sure how to use the other one. Could you please clarify it?

– K. Makino
Dec 12 '18 at 1:32

You need pass all props. Read this article medium.com/@soorajchandran/…

– vac9
Dec 12 '18 at 9:02

add a comment |

The architecture of your project:
Provider > ConnectedRouter > App > Layout (have NavLink) > Switch > Routes

You have to build architecture in this way:
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;

answered Nov 25 '18 at 20:03

community wiki

vac9

Thanks for your answer, but where in your example can I put the layout?

– K. Makino
Nov 27 '18 at 5:08

You can use pattern HOC and use it in routes file. Example: <Route path="/test" component={Layout(Test)} />. Or put Layout in component.

– vac9
Nov 27 '18 at 16:34

Sorry for the delay in the reply. I tried HOC method but it gives Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. and am not sure how to use the other one. Could you please clarify it?

– K. Makino
Dec 12 '18 at 1:32

You need pass all props. Read this article medium.com/@soorajchandran/…

– vac9
Dec 12 '18 at 9:02

add a comment |

The architecture of your project:
Provider > ConnectedRouter > App > Layout (have NavLink) > Switch > Routes

You have to build architecture in this way:
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;

answered Nov 25 '18 at 20:03

community wiki

vac9

The architecture of your project:
Provider > ConnectedRouter > App > Layout (have NavLink) > Switch > Routes

You have to build architecture in this way:
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;

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

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

answered Nov 25 '18 at 20:03

community wiki

vac9

answered Nov 25 '18 at 20:03

community wiki

vac9

community wiki

vac9

community wiki

vac9

Thanks for your answer, but where in your example can I put the layout?

– K. Makino
Nov 27 '18 at 5:08

You can use pattern HOC and use it in routes file. Example: <Route path="/test" component={Layout(Test)} />. Or put Layout in component.

– vac9
Nov 27 '18 at 16:34

Sorry for the delay in the reply. I tried HOC method but it gives Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. and am not sure how to use the other one. Could you please clarify it?

– K. Makino
Dec 12 '18 at 1:32

You need pass all props. Read this article medium.com/@soorajchandran/…

– vac9
Dec 12 '18 at 9:02

add a comment |

Thanks for your answer, but where in your example can I put the layout?

– K. Makino
Nov 27 '18 at 5:08

You can use pattern HOC and use it in routes file. Example: <Route path="/test" component={Layout(Test)} />. Or put Layout in component.

– vac9
Nov 27 '18 at 16:34

Sorry for the delay in the reply. I tried HOC method but it gives Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. and am not sure how to use the other one. Could you please clarify it?

– K. Makino
Dec 12 '18 at 1:32

You need pass all props. Read this article medium.com/@soorajchandran/…

– vac9
Dec 12 '18 at 9:02

Thanks for your answer, but where in your example can I put the layout?

– K. Makino
Nov 27 '18 at 5:08

You can use pattern HOC and use it in routes file. Example: <Route path="/test" component={Layout(Test)} />. Or put Layout in component.

– vac9
Nov 27 '18 at 16:34

Sorry for the delay in the reply. I tried HOC method but it gives

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

and am not sure how to use the other one. Could you please clarify it?

– K. Makino
Dec 12 '18 at 1:32

Sorry for the delay in the reply. I tried HOC method but it gives

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

and am not sure how to use the other one. Could you please clarify it?

– K. Makino
Dec 12 '18 at 1:32

You need pass all props. Read this article medium.com/@soorajchandran/…

– vac9
Dec 12 '18 at 9:02

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk