How to integrate React Router in Meteor?

help
1

I am trying to integrate Routes using React Router in Meteor Project. I have followed the Meteor React documentation but somehow its not working. Have tried with “Router” instead of “BrowserRouter” but no luck. Any suggestions on this.

imports/startup/client/routes.js

import { BrowserRouter, Route, Switch } from "react-router-dom";

import App, City , NotFound from "respective-modules";
 
export const renderRoutes = () => {
  <BrowserRouter>
    <div>
      <Switch>
        <Route exact path="/" component={App} />
        <Route exact path="/city" component={City} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </BrowserRouter>;

client/main.html

<body>
  <div id="react-target"></div>
</body>

client/main.jsx

import { renderRoutes } from "/imports/startup/client/routes.js";

Meteor.startup(() => {
  render(renderRoutes(), document.getElementById("react-target"));
});

But a blank page is getting appeared.

2

Hi,

What’s the error in the console ?
Do you import render from ReactDOM ?

3

Here’s a simple example:

https://github.com/bowfolios/bowfolios/blob/master/app/imports/ui/layouts/App.jsx

Philip

4

Hi @ivo, Unfortunately there is no error. Its just not rendering the renderRoutes() function. If I connect a direct component (< City /> ) shown below, its working correctly. But My requirement is Routes config.

Meteor.startup(() => {
  render( <City />, document.getElementById("react-target"));
});
5

Hi Philip, thanks will look into it and get back to you.

6

I think your render routes function is not returning anything as you are using curly-braces. Either use parenthesis to return directly or add return before and try again.

If it’s not the case, put full code as it would be much easier to help you debug.

Good luck

2 Likes
7

@ivo Good catch, that’s definitely an error.

1 Like
8

This worked for me. Thank you.

1 Like