How to create seperate component just for routes using react router?

Question

like the title says I need to create separate component where I will store routes for my project. This is what I have done in App.js component:

 <Router>
    <Switch>
      <Route path="/" exact />
      <Route path="/messages/messagelist" exact />
      <Route path="/messages/ceostats" exact />
      <Route path="/resourcem/categories" exact />
      <Route path="/resourcem/subcategories" exact />
      <Route path="/resourcem/resources" exact />
      <Route path="/surveys" exact />
      <Route path="/userm/users" exact />
      <Route path="/userm/usergroups" exact />
    </Switch>
  </Router>

What I need to do now, is to extract them for example in separate component let's call it Route.js. How do I do that?

first create and export your components in another files, then import them into your main file and load with `` — Mohammad Esmaeilzadeh, Oct 04 '21 at 10:04
Oh, I see, an alternative to the given answer, u can simple make a separate component and wrap with the component the routes, then u can just add the component to the app.js, right under — Y_Moshe, Oct 04 '21 at 10:40

score 1 · Answer 1 · answered Oct 04 '21 at 10:03

1

<Route path="/" component = { ... } exact /> // read docs for more info

https://reactrouter.com/web/api/Route/component

answered Oct 04 '21 at 10:03

Y_Moshe

424
1
5
11

1

The asker appears to be asking about moving the router itself into a component, not how to point their routes at other components. – DBS Oct 04 '21 at 10:28
1

Yes, I was asking about what @DBS is saying and the solution was provided, but thank you again! – ahmedskulj10 Oct 04 '21 at 10:34
Oh, I see, an alternative to the given answer, u can simple make a separate component and wrap with the component the routes, then u can just add the component to the app.js, right under – Y_Moshe Oct 04 '21 at 13:15

nima · Accepted Answer · 2021-10-04T10:25:59.247

1

I prefer to separate the RouterProvider in this way:

First, let create a RouterProvider.js:

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';


function RouterProvider() {
  return (
    <Router>
      <Switch>
        // Routes 
      </Switch>
    </Router>
  )
}

export default RouterProvider;

Now, create a routes.js file:

import HomePage from 'pages/home';
import AboutUsPage from 'pages/aboutUs';

const routes = [
  {
    path: '/home',
    component: HomePage,
    exact: true
  },
  {
    path: '/aboutUs',
    component: AboutUsPage,
    exact: true
  },
 // and so on for other routes in your project
]

export default routes;

Back to the RouterProvder.js and import the routes object and use it:

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

import routes from 'path/to/routes' // ---> import from routes.js file

function RouterProvider() {
  return (
    <Router>
      <Switch>
        {
          routes.map(route => 
            <Route path={route.path} component={route.component} exact={route.exact} />
          )
        } 
      </Switch>
    </Router>
  )
}

export default RouterProvider;

Finally, add the RouterProvider as the last layer in the App.js file:

import RouterProvider from 'path/to/providers/routerProvider'

function App() {
   return (
      <ReduxProvdier>
         <RouterProvider/>
      </ReduxProvider>
   )
}

Note: ReduxProvider is just an example of other providers in your application like Toast provider or Network provider.

Note: creating routes object in routes.js is not useful in all cases for example if you wanna use Suspense/Lazy it's not working as your expectation.

edited Oct 04 '21 at 10:25

answered Oct 04 '21 at 10:19

nima

7,796
12
36
53

is not there any way to handle react-router-transition. I wanted to update my routes like you mentioned,but could not handle the transition between components – sayinmehmet47 Nov 10 '21 at 10:12
thanks for the feedback, I'll take a look at it – nima Nov 10 '21 at 10:14
did you try this? https://v5.reactrouter.com/web/example/animated-transitions – nima Nov 10 '21 at 10:16
https://github.com/maisano/react-router-transition this one – sayinmehmet47 Nov 10 '21 at 10:21
is it possibble to explain how to do it with animated transtion – sayinmehmet47 Nov 10 '21 at 15:32
1

I've created a codesandbox with all the things you need, separation on providers and router with the transition. the transition example comes from the official documentation. https://codesandbox.io/s/so-separating-providers-with-router-transition-03mj1 @sayinmehmet47 – nima Nov 11 '21 at 09:42
1

Thank you by the way. I have created it with react-transition-group. Because react-router-transition is not working with "react-router-dom": "^6.0.0-beta.8". So I created it here. https://github.com/sayinmehmet47/currency-portfolio. It is working well – sayinmehmet47 Nov 12 '21 at 08:25

How to create seperate component just for routes using react router?

2 Answers2