Nested route not being rendered

Question

I have:

<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>
    )

I am able to render MyComponent, but when I click on the link to .../test route it does not render the route below. It goes to a 404 page that I have defined.

Am i missing something?

--

So, after testing some answers, i got a problem that, the route that the link is redirecting to, does not display.

Given the following code (be aware that, all this code is already a route and is inside a <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>
        );
    }
}

The statement: "Hi from main component" Gets loaded as i arrive in this route, but as i click on the test link, it falls into my "404" route, which is:

<Route component={NotFound} />

This NotFound route is sibling of MyComponent, and it is in the end of the root switch, the first one that i posted on this question.

What else can i look into, to try to see what is breaking this link?

Yeah, its typo on question itself, not on code, i'm editing it — PlayMa256, Jul 06 '18 at 13:41

Mustkeem K · Answer 1 · 2018-07-06T13:56:27.860

1

Have you tried using match.url. Something like this. Here is what documentation says about it.

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>
);

edited Jul 06 '18 at 13:56

answered Jul 06 '18 at 13:38

Mustkeem K

5,524
1
24
38

I want to be able to render the content of MyOtherComponent inside MyComponent, by doing this, i won't be able. Will i? – PlayMa256 Jul 06 '18 at 13:42

Mark C. · Answer 2 · 2018-07-06T15:47:20.540

1

Have you tried something like :

    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>

In your updated question, I am able to see the rendered JSX by clicking on the link using this markup :

<Link to={match.url + '/test'}>Show Test!</Link>
<Route path={match.url + "/test"} component={() => <h1>test123</h1>} />

edited Jul 06 '18 at 15:47

answered Jul 06 '18 at 13:56

Mark C.

5,789
4
31
60

Hello, please, have a look at the edit i've made, after the `---`. Also, thank you for your answer. – PlayMa256 Jul 06 '18 at 15:43
see my edit -- can you just copy what I edited and see if it works? There's not much of a difference except omitting `exact` – Mark C. Jul 06 '18 at 15:48
Actually, indeed both answers are right, the problem was up in the route tree. Following this questions anwer, https://stackoverflow.com/questions/47308065/react-router-4-nested-routes-not-rendering i was able to fix this. – PlayMa256 Jul 06 '18 at 15:59

Nested route not being rendered

2 Answers2