Breaking News: Grepper is joining You.com. Read the official announcement!

alternative way to handle React routes in a separate file

Yucky Yak answered on February 24, 2022 Popularity 7/10 Helpfulness 3/10

answer alternative way to handle React routes in a separate file

related define all routes in a seperate file in react

alternative way to handle React routes in a separate file

Comment

import { lazy } from 'react'

// use lazy for better code splitting, a.k.a. load faster
const Dashboard = lazy(() => import('../pages/Dashboard'))
const Forms = lazy(() => import('../pages/Forms'))
const Cards = lazy(() => import('../pages/Cards'))
const Charts = lazy(() => import('../pages/Charts'))
const Buttons = lazy(() => import('../pages/Buttons'))
const Modals = lazy(() => import('../pages/Modals'))
const Tables = lazy(() => import('../pages/Tables'))
const Page404 = lazy(() => import('../pages/404'))
const Blank = lazy(() => import('../pages/Blank'))

const routes = [
  {
    path: '/dashboard', // the url
    component: Dashboard, // view rendered
  },
  {
    path: '/forms',
    component: Forms,
  },
  {
    path: '/cards',
    component: Cards,
  },
  {
    path: '/charts',
    component: Charts,
  },
  {
    path: '/buttons',
    component: Buttons,
  },
  {
    path: '/modals',
    component: Modals,
  },
  {
    path: '/tables',
    component: Tables,
  },
  {
    path: '/404',
    component: Page404,
  },
  {
    path: '/blank',
    component: Blank,
  },
]

export default routes

Popularity 7/10 Helpfulness 3/10 Language javascript

Source: github.com

Tags: file handle javascript routes

Link to this answer
Share Copy Link

Contributed on Feb 24 2022

Yucky Yak

0 Answers Avg Quality 2/10

Closely Related Answers

define all routes in a seperate file in react

Comment

well i had the same issue a few days ago, and the solution for me was this...

This one of the routes files:

import React from 'react';
import { Route } from 'react-router-dom';
import { ComponentY } from '../components/functionalitys';

export default [
  <Route path="/appointment" component={ComponentY} exact key="create" />,
];
This another route file:

import React from 'react';
import { Route } from 'react-router-dom';
import { LoginPage, Register } from '../components/user';

export default [
  <Route path="/register" component={Register} exact key="create" />,
  <Route path="/login" component={LoginPage} exact strict key="login" />
];
And this is how I imported in the main app.js:

import routesFromFile1 from './the/route';
import routesFromFile2 from './the/other/route';

class App extends Component{
  render(){
    return(
       <div className="wrapper">
           <section className="content container-fluid">
              <Switch>  
                <Route exact path="/" component={Home} strict={true} exact={true}/>
                <Route path="/500" component={InternalServer} />
                {routesFromFile1}
                {routesFromFile2}
              </Switch>
            </section>
          </div>
        )
    }
}

Popularity 5/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript routes file

Link to this answer
Share Copy Link

Contributed on Aug 16 2022

Testy Termite

0 Answers Avg Quality 2/10

alternative way to handle React routes in a separate file

Contents

More Related Answers

alternative way to handle React routes in a separate file

Closely Related Answers

define all routes in a seperate file in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.