How to use react-router-dom in server-side rendering in react?

Question

Using react-router-dom in server-side react creates an error.

Invariant Violation: Browser history needs a DOM

I am using react-router-dom BrowserRouter to render my component in div if url match my component path.

  const routes = [

  { path: 'dashboard',
    exact: true,
    component: Dashboard
  },
  { path: 'notification',
    exact: true,
    component: Notification
  }

];

and then use this code to target specific div to render my component:

<div>
     { routes.map((route, index) => (
       <Route
            key={index}
            path={`${match.url}/${route.path}`}
            exact={route.exact}
              />
        ))}
</div>

But this code work only in client-side react. How can I implement this to server-side?

Flying · Accepted Answer · 2017-11-09 07:28:15Z

0

Please take a look at official documentation, you need to use different history provider for server side rendering because you don't have a real DOM (and browser's history) on server.

You may also want to use memory history because it works fine on server side.

answered Nov 9, 2017 at 7:28

Flying

4,5802 gold badges21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jazul Kerk Over a year ago

Hi sir. I tried your solution but MemoryRouter only support one child element.

Flying Over a year ago

@JazulKerk you can easily wrap your routes into <div>. Actually router component can wrap your application's root element and it will be the only child element for it.

Jazul Kerk Over a year ago

sorry I cant comprehend your explanation :( . can you give me an actual code example for this? thank you.

Flying Over a year ago

@JazulKerk of course, please take a look at this gist, hope it will help.

MackoyokcaM · Accepted Answer · 2017-11-09 07:40:21Z

0

Looks like you missed adding component to the Route.

<div>
         { routes.map((route, index) => (
           <Route
                key={index}
                path={`${match.url}/${route.path}`}
                exact={route.exact}
                component={route.component}
                  />
            ))}
    </div>

answered Nov 9, 2017 at 7:40

MackoyokcaM

1477 bronze badges

Collectives™ on Stack Overflow

How to use react-router-dom in server-side rendering in react?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related