How to generate Rect JS routes dynamically from API

user_13225077 0
Viewed 76

I have an react JS "routes" with static json data.I would like to know how to generate this routes data dynamically from API.Please check my below routes data and advise how to do this.

    import React from 'react';

const Dashboard = React.lazy(() => import('./views/Dashboard'));
const Colors = React.lazy(() => import('./views/Theme/Colors'));
const Typography = React.lazy(() => import('./views/Theme/Typography'));
const Widgets = React.lazy(() => import('./views/Widgets/Widgets'));
const Users = React.lazy(() => import('./views/Users/Users'));
const User = React.lazy(() => import('./views/Users/User'));
const login = React.lazy(() => import('./views/Pages/Login'));

// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
const routes = [

  { path: '/', exact: true, name: 'Home' },
  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
  { path: '/theme', exact: true, name: 'Theme', component: Colors },
  { path: '/theme/colors', name: 'Colors', component: Colors },
  { path: '/theme/typography', name: 'Typography', component: Typography },
  { path: '/widgets', name: 'Widgets', component: Widgets },
  { path: '/users/:id', exact: true, name: 'User Details', component: User },
];

export default routes;
reactjs node.js javascript
1 Answers

Could you explain which is your objective a little further?

I mean, if you know those are going to be the routes for your app, then you can control, i.e. in the /users/:id route, the ID passing it as prop to the User component you will be rendering when accessing that route.

Inside that component then you can do whatever you want, like probably fetching that user data from the API to show him his profile or whatever.

Hope that helps

user_80890140
Related