I using react-router-dom but its not importing my component lazily. I dont know what is wrong. I dont have any error or warning. Its just not showing my component. For make it more clear my sandbox : https://codesandbox.io/s/cold-thunder-kz7sy?file=/src/App.js

If you dont have time for check sandbox my codes :

AppViews

export const AppViews = () => {
  

  return (
    <Suspense fallback={<p>Loading..</p>}>
      <Switch>
        <Route
          exact
          path={`${APP_PREFIX_PATH}/dashboard`}
          component={lazy(() => import(`./dashboard`))}
        />

        <Route
          exact
          path={`${APP_PREFIX_PATH}/commons`}
          component={lazy(() => import(`./commons`))} 
        />

        <Redirect
          exact
          from={`${APP_PREFIX_PATH}`}
          to={`${APP_PREFIX_PATH}/commons`}
        />
      </Switch>
    </Suspense>
  );
};

export default AppViews;

Commons

const Commons = ({ match }) => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Router>
        <Switch>
          <Route
            exact
            path={`${match.url}/documents`}
            component={lazy(() => import(`./documents`))}
          />
        </Switch>
      </Router>

      <Redirect from={`${match.url}`} to={`${match.url}/documents`} />
    </Suspense>
  );
};

export default Commons;

After that my url is turning localhost:3000/v1/commons/documents but my Documents component doesn't import. My screen shows nothing. What is wrong in that codes ? I tried to delete exacts and tried again but still same. Thanks for reply!