Search code examples
meteorreact-routerreact-router-dom

How to integrate React Router in Meteor?

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.

Solution

  • If the code you are showing is correct (i.e., copied accurate from what you are running), then you just have an extra curly bracket:

    export const renderRoutes = () => {
  <BrowserRouter>

    needs to be either:

    export const renderRoutes = () => 
  <BrowserRouter>

    or

    export const renderRoutes = () => {
  return <BrowserRouter>