Невозможно отобразить дочерние компоненты с помощью React Router (вложенные маршруты) - PullRequest
Новая
       5

Невозможно отобразить дочерние компоненты с помощью React Router (вложенные маршруты)

0 голосов
/ 08 февраля 2020

Я пытаюсь использовать вложенные маршруты для рендеринга различных компонентов. Когда я нажимаю на мои ссылки, 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;

enter image description here

1 Ответ

0 голосов
/ 08 февраля 2020

Компоненты не отображаются, потому что вы должны использовать component prop вместо 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

...