Reactjs 无法使用React路由器（嵌套路由）呈现子组件

我正在尝试使用嵌套路由渲染不同的组件。当我单击我的链接时，URL会更新，但组件不会呈现。在此之前，我使用的是导入的组件，但由于这不起作用，我将其拆分为这段代码，它仍然显示一个空白组件，没有错误

        import React from 'react';

        import { Route, Switch, Link, useRouteMatch } from 'react-router-dom';

        function InfluencerComponent() {
            let { path, url } = useRouteMatch();

            const navLinks = (
                <div>
                    <Link to={`${url}/select-trade`}>Select trade</Link>
                    <Link to={`${url}/add-skills`} className="ml-2">
                        Add skills
                    </Link>
                </div>
            );
            return (
                <div className="row mt-3">
                    <Switch>
                        <Route exact path={path}>
                            {navLinks}
                        </Route>
                        <Route path={`${path}/select-trade`}>
                            {navLinks}
                            <Test />
                        </Route>
                        <Route path={`${path}/add-skills`}>
                            {navLinks}
                            <TestTwo />
                        </Route>
                    </Switch>
                </div>
            );
        }

        function Test() {
            return 'Test Component';
        }

        function TestTwo() {
            return 'Another Test Component';
        }

        export default InfluencerComponent;

从“React”导入React；
从“react router dom”导入{Route，Switch，Link，useRouteMatch}；
函数影响器组件（）{
让{path，url}=useRouteMatch（）；
常量导航链接=(
选择行业
添加技能
);
返回(
{navLinks}
{navLinks}
{navLinks}
);
}
功能测试（）{
返回“测试组件”；
}
函数TestTwo（）{
返回“另一个测试组件”；
}
导出默认的影响力组件；

---

组件未渲染，因为您应该使用

组件

道具而不是

子项

例如：

返回(
// ...
); 

有关

道具的更多信息：

---

如果删除

，会发生什么？相同的结果。我要离开这个例子：

    return (
        <div className="row mt-3">
            <Switch>
                // ...
                <Route path={`${path}/add-skills`} component={<>{navLinks}<TestTwo /></>} />
            </Switch>
        </div>
    );