reactjs - 无法使用 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;

标签： reactjsreact-routerreact-hooks

Answer 1

组件未呈现，因为您应该使用componentprop 而不是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