Easy way to separate my protectedroute to different file in react - reactjs

Question

I am looking for a way to separate my protectedroute from a app.js. Everything works well in my code. But if the module become to big its hard to read and manage app.js
I am looking to separate my protected routes to some component so it works here very well.
My app.js right now look like this way
import React, { useState } from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams,
HashRouter,
BrowserRouter,
Redirect
} from "react-router-dom";
import ReactDOM from 'react-dom';
//import useToken from './Routes/UseToken';
import Login from './Login/Login';
import Dashboard from './Dashboard/Dashboard';
import Customer from './Customer/Customer';
import ProtectedRoute from './Routes/ProtectedRoute';
function App() {
return (
<>
{/** use HasRouter but that will make # in the browser */}
{/*<HashRouter>*/}
<BrowserRouter basename='/invoice/webapps/'>
<Switch>
<Route path="/login"><Login /></Route>
<ProtectedRoute path="/dashboard"><Dashboard /></ProtectedRoute>
<ProtectedRoute path="/customer"><Customer/></ProtectedRoute>
<Route exact path="/"><Redirect exact from="/" to="dashboard" /></Route>
<Route path="*"><Redirect from="/" to="dashboard" /></Route>
</Switch>
</BrowserRouter>
{/** </HashRouter>*/}
{/** use HasRouter but that will make # in the browser */}
</>
);
}
export default App;
if (document.getElementById('app')) {
ReactDOM.render(<App />, document.getElementById('app'));
}
i want to separate these
<ProtectedRoute path="/dashboard"><Dashboard /></ProtectedRoute>
<ProtectedRoute path="/customer"><Customer/></ProtectedRoute>

Answer 1

You can create a file route.js export and object like this
const routes = [
{component: A, path: '/a'},
{component: B, path: '/b', isProtected: true}
]
and in App.js you can use routes.map(route => ()) for rendering them.
<BrowserRouter basename='/invoice/webapps/'>
{routes.map((route, index) =>
route.isProtected
? <ProtectedRoute path={route.path} key={index}><route.component/></ProtectedRoute>
: <Route path={route.path} key={index}><route.component/> </Route>
}
</BrowserRouter>
There may be some syntax errors, so I suggest you understanding my idea instead of copying.