Вложенный маршрут не отображается - PullRequest
Новая
       11

Вложенный маршрут не отображается

0 голосов
/ 06 июля 2018

у меня есть: 

<Switch>
    <Route
        exact
        path={'/path/to/my/component'}
        component={MyComponent}
    />
    ...
</Switch>



MyComponent:

    return (
        <div>
            <h1>Here Some Text</h1>
            <Link to={'/path/to/my/component/test'}>Test</Link>
            <Route exact path={"/path/to/my/component/test"} component={MyOtherComponent} />

        </div>
    )

Я могу отобразить MyComponent, но когда я нажимаю ссылку на маршрут .../test, он не отображает маршрут ниже. Он переходит на страницу 404, которую я определил.

Я что-то упустил?

-

Итак, после тестирования некоторых ответов у меня возникла проблема, связанная с тем, что маршрут, на который перенаправляется ссылка, не отображается.

Учитывая следующий код (учтите, что весь этот код уже является маршрутом и находится внутри <switch>). 

    render() {
        const { match } = this.props;
        return (
            <div className="advanced-configuration">
                <div className="advanced-configuration__content userManagement__body">
                    <Link to={`${match.url}/test`}>Test</Link>
                    <Route exact path={`${match.url}/test`} component={() => <h1>test123</h1>} />
                    <Route exact path={match.url} component={() => <h2>Hi from main compoponent</h2>} />
                </div>
            </div>
        );
    }
}

Утверждение: «Привет из основного компонента» Загружается, когда я прибываю на этот маршрут, но когда я нажимаю на тестовую ссылку, он попадает в мой маршрут «404», который: 

<Route component={NotFound} />

Этот маршрут NotFound является родственным для MyComponent, и он находится в конце корневого коммутатора, первого, который я опубликовал по этому вопросу.

Что еще я могу посмотреть, чтобы увидеть, что нарушает эту ссылку?

Ответы [ 2 ]

0 голосов
/ 06 июля 2018

Вы пробовали что-то вроде: 

    let match = this.props.match
    <div>
        <h1>Here Some Text</h1>
        <Link to={match.url + '/test'}>Test</Link>
        <Route exact path={match.url + "/test"} component={MyOtherComponent} />

    </div>

В вашем обновленном вопросе я могу увидеть визуализированный JSX, нажав на ссылку, используя эту разметку: 

<Link to={match.url + '/test'}>Show Test!</Link>
<Route path={match.url + "/test"} component={() => <h1>test123</h1>} />
0 голосов
/ 06 июля 2018

Вы пытались использовать match.url. Что-то вроде этого. Вот что говорит документация . 

const Topics = ({ match }) => (
  <div>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>Rendering with React</Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic} />
      <Route
        exact
        path={match.url}
        render={() => <h3>Please select a topic.</h3>}
      />
  </div>
);

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
);
...