如何将导入路由抽象到主 App.js - React，Node.js

Question

I am currently importing all pages on main App.js file but it became quite messy as there is plenty of imports. I import them in the following format:

import Account_Dashboard from "./pages/Account_Dashboard";

Then I use them as below:

<ProtectedRoute
              exact
              path={PATHS.ACCOUNT_DASHBOARD}
              authenticate={this.authenticate}
              component={Account_Dashboard}
              user={this.state.user}
            />

Is there a way to create separate file where I import all those pages and then I just import that file to make it more dry?

Thanks

Answer 1

yes, why not, you can create a separate file to manage your routes there, take a look at the below example:

RouteProvider.tsx:

interface RouteProviderProps {
  loading?: JSX.Element;
}

function RouteProvider({ loading }: RouteProviderProps) {
  return (
    <React.Suspense fallback={loading ? loading : <Loading />}>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/search" component={SearchPage} />
        <Route exact path="/add" component={Add} />
        <Route exact path="/edit/:id" component={Edit} />
        <Route path="/relations" component={Relation} />
        <Route path="/:slug" component={BlahBlahPage} />
      </Switch>
    </React.Suspense>
  );
}

And now have a simple and good abstraction... so now we use it:

function App() {
  return (
    <BrowserRouter>
      <ContextProvider>

        <RouteProvider />
        
      </ContextProvider>
    </BrowserRouter>
  );
}