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

0
votes

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?

2
reactjsreduxreact-routerreact-router-dom

2 Answers

0
votes

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.

0
votes

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>