CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4react-router-dom
PlayMa256
PlayMa256

Reputation: 6841

Nested route not being rendered

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?

Upvotes: 1

Views: 806

Answers (2)

Mark C.
Mark C.

Reputation: 6460

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>} />

Upvotes: 1

Mustkeem K
Mustkeem K

Reputation: 8848

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

Upvotes: 1

Related Questions