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

Question

我正在尝试使用嵌套路由来呈现不同的组件。当我单击链接时，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;

Answer 1

组件未呈现，因为您应该使用component属性而不是children。

示例：

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

有关<Route />道具的更多信息：

https://reacttraining.com/react-router/web/api/Route/component