動的ルーティングの作り方をざざっと

構想

• 最初はログイン画面
• ホーム画面からネストしていく

まずは各コンポーネントを作成
コード省略

src/router/homeRoutes.tsx

import Home from '../components/pages/Home';
import Page404 from '../components/pages/Page404';
import Setting from '../components/pages/Setting';
import UserManagement from '../components/pages/UserManagement';

export const homeRoutes = [
  {
    path: '/',
    exact: true,
    children: <Home />,
  },
  {
    path: '/user_management',
    exact: false,
    children: <UserManagement />,
  },
  {
    path: '/setting',
    exact: false,
    children: <Setting />,
  },
  {
    path: '*',
    exact: false,
    children: <Page404 />,
  },
];

src/router/Router.tsx

import { Switch, Route } from 'react-router-dom';
import Login from '../components/pages/Login';
import Page404 from '../components/pages/Page404';
import { homeRoutes } from './homeRoutes';

const Router: React.FC = () => {
  return (
    <Switch>
      <Route exact path='/'>
        <Login />
      </Route>
      <Route
        path='/home'
        render={({ match: { url } }) => (
          <Switch>
            {homeRoutes.map((route) => (
              <Route
                key={route.path}
                exact={route.exact}
                path={`${url}${route.path}`}
              >
                {route.children}
              </Route>
            ))}
          </Switch>
        )}
      />
      <Route path='*'>
        <Page404 />
      </Route>
    </Switch>
  );
};

export default Router;

renderメソッドはデフォルトでpropsを受け取っていて、その中のmatchにurlここではpathで使用している/homeが入っているのであとは別で用意しているhomeRoutesを.mapで回して展開する。pathをテンプレートリテラルで作成すれば出来上がり。