Sometimes, we want to declare React Router routes in a separate file and import them.

In this article, we’ll look at how to declare React Router routes in a separate file and import them.

How to declare React Router routes in a separate file and import them?

To declare React Router routes in a separate file and import them, we can create a function that returns the Router components with the Routes inside it.

For instance, we write

import React from "react";
import { Router, Route } from "react-router";
import { Foo, Bar, Baz } from "./templates";

const createRoutes = () => (
  <Router>
    <Route exact path="/foo" component={Foo} />
    <Route exact path="/bar" component={Bar} />
    <Route exact path="/baz" component={Baz} />
  </Router>
);

export default createRoutes;

to create the createRoutes function that returns the Router with the Routes and export it.

Then we use it by writing

import ReactDOM from "react-dom";
import createRoutes from "./routes";

const routes = createRoutes();

ReactDOM.render(routes, document.getElementById("root"));

to call createRoutes and use the returned routes in render.

Conclusion

To declare React Router routes in a separate file and import them, we can create a function that returns the Router components with the Routes inside it.