React route exact not work if I have child route in React router v5

Question

I am trying to make routes like Vue js structures, put the routes into array like this:

// routes.js
export const routing = [
        {
            path: "/setting",
            component: Setting,
        },
        {
            path: "/",
            component: Feed,
            child: [
                {
                    path: "/news",
                    exact: true,
                    component: News,
                },
                {
                    path: "/readlater",
                    component: ReadLater,
                },
            ],
        },
    ];

// Feed.js 
export const Feed = ({ child }) => {
    return (
        <>
            <h2>Feed </h2>
            <ul>
                <li>
                    <Link to="/news">News </Link>
                </li>
                <li>
                    <Link to="/readlater"> read Later </Link>
                </li>
            </ul>

            <Switch>
                {child.map((route, i) => (
                    <RouteWithSubRoutes key={i} {...route} child={route.child}/>
                ))}
            </Switch>
        </>
    );
}

// App.js
   <Router>
     <div className="App">
         <div>
             <ul>
                 <li>
                     <Link to="/"> Home </Link>
                 </li>
                 <li>
                     <Link to="/setting"> Setting </Link>
                 </li>
             </ul>
             <Switch>
                 {routing.map((route, i) => (
                     <RouteWithSubRoutes key={i} {...route} />
                 ))}
             </Switch>
         </div>
     </div>
   </Router>

it can't read the exact in Feed.js I think, is there any way to use that structure to work exact for nested route???

I followed the instruction from this https://reactrouter.com/web/example/route-config

and it is very similar like I made above but I want to exact the '/Tacos' route child on that website

my ReactWithSub component like this:

export const RouteWithSubRoutes = route => {
    return (
        <Route
            path={route.path}
            exact={route.exact}
            render={props => <route.component {...props} child={route.child} />}
        />
    );
}

this is the sandobox: https://codesandbox.io/embed/adoring-pine-46dri?fontsize=14&hidenavigation=1&theme=dark

Answer 1

just put the parent and the exiting child which want to be default to be same routing name and dont forgot to exact true like this

       {
            path: "/",
            component: Feed,
            child: [
                {
                    path: "/",
                    exact: true,
                    component: News,
                },
                {
                    path: "/readlater",
                    component: ReadLater,
                },
            ],
        },