Code first as a token of respect

const routes = [
    {
        path: "/",
        exact: true,
        component: Main,
    },
    {
        path: "/company",
        // exact: true,
        component: CompanyIntroduce,
        routes:[
            {
                path: "/company/introduce",
                exact: true,
                component: CompanyManagement,
            },
            {
                path: "/company/management",
                exact: true,
                component: CompanyManagement,
            },
        ]
    },
];

const router = (
    <Router history={history}>
        <AppContainer history={history}>
            <Switch>
                {routes.map((route, i) => (
                    <ExtendRoute key={i} {...route} />
                ))}
                <Route component={NoMatchContainer} />
            </Switch>
        </AppContainer>
    </Router>
);

export default router;

wants to do a nested route, visiting / company and / company/introduce both points to CompanyIntroduce components, while accessing / company/management points to CompanyManagement components, but the fact is that it doesn"t matter whether I visit / company , visit / company/introduce , or visit / company/management , all point to . I don"t understand its usage. Compared with the routing of vue , it is really difficult to use and understand. I would appreciate it if the boss of the meeting can help me to see what the problem is.