RouterComp.jsx

import React from 'react'
import { Route, Redirect, Switch } from 'react-router-dom'

function RouterComp(props) {
  let {
    routes
  } = props;
  //Here is to find out all items that are redirects
  let redir = routes && routes.length > 0 && routes.filter((v, i) => {
    return v.redirect 
  })
  //Render the redirected component
  let renderRedir = redir.length > 0 && redir.map((v, i) => {
    return <Redirect from={v.path} to={v.redirect} key={i} />
  })
  return (
    <Switch>
      {
      //Here, all Routes are rendered according to its path and corresponding components
        routes && routes.length > 0 && routes.map((v, i) => {
          if (v.component) {
            return <Route key={i} path={v.path} component={(props) => {
            	//Here we pass the children, which is the next level of routing, to facilitate the use of the next level of routing
              return <v.component routes={v.children} {...props} />
            }} />
          }
          //Here we will add the redirected component to it
        }).concat(renderRedir)
      }
    </Switch>  
  )
}

export default RouterComp