React Router Navlink to another Page using props passed from a Parent

Question

I am redering cards with unique "types" that link to different pages based on the props.type passed to it in react.

Am I correctly dynamically creating these router links?

import React from 'react';
import {render} from 'react-dom';
import {Route, NavLink, Switch, Redirect} from 'react-router-dom';
import Answered from '../../containers/Blog/answered/answered-posts';
import './Post.css';

import RothIRA from '../../containers/Types/RothIRA';

function post(props) {

  return (
    <article className="Post" onClick={props.clicked}>

      <NavLink to={{
        pathname: '/' + props.type,
        hash: '#submit',
        search: '?quick-submit=true'
      }}>
        {props.type}
      </NavLink>

      <Switch>
        <Route path={'/' + props.type} component={RothIRA}/>
      </Switch>
    </article>

  );

}

export default post;

score 1 · Accepted Answer · answered Jan 07 '21 at 05:07

First of all, It's meanless to use the Switch tag if there is just one Route in the tag. Because the Switch tag is rendering only one Route that matched first even there are two or more matched elements in the Switch tag.

this is the official document for the Switch tag https://reactrouter.com/web/api/Switch

The second one is the RothIRA component. It's rendered always no matter what type is routed. It's okay if you made the RothIRA component render contents flexibly according to the route. But if you don't, it will render the same thing every time is routed. If you did, look at these examples.

this example is rendering different component according to the route

import React from 'react';
import {render} from 'react-dom';
import {Route, NavLink, Switch, Redirect} from 'react-router-dom';
import Answered from '../../containers/Blog/answered/answered-posts';
import './Post.css';

import RothIRA1 from '../../containers/Types/RothIRA1';
import RothIRA2 from '../../containers/Types/RothIRA2';

function post(props) {

  return (
    <article className="Post" onClick={props.clicked}>

      <NavLink to={{
        pathname: '/' + props.type,
        hash: '#submit',
        search: '?quick-submit=true'
      }}>
        {props.type}
      </NavLink>

      <Switch>
        <Route path={'/1'} component={RothIRA1}/>
        <Route path={'/2'} component={RothIRA2}/>
      </Switch>
    </article>

  );

}

export default post;

this example is rendering the RothIRA but let it know what type is with props

import React from 'react';
import {render} from 'react-dom';
import {Route, NavLink, Switch, Redirect} from 'react-router-dom';
import Answered from '../../containers/Blog/answered/answered-posts';
import './Post.css';

import RothIRA from '../../containers/Types/RothIRA';

function post(props) {

  return (
    <article className="Post" onClick={props.clicked}>

      <NavLink to={{
        pathname: '/' + props.type,
        hash: '#submit',
        search: '?quick-submit=true'
      }}>
        {props.type}
      </NavLink>

      <Route path={'/' + props.type} render={() => (<RothIRA type={props.type} />)}/>
    </article>

  );

}

export default post;

And other things are looking good for me.

this is great thanks! I am going to try this out! I was wondering where to implement the render() function and this answered that for me as well. — Matt Laszcz, Jan 07 '21 at 16:32
If i have a parent container for this component "post" how would I insert it into the parent? Would if be ? I get an unidentified route when I do this. — Matt Laszcz, Jan 08 '21 at 02:38
@MattLaszcz maybe work. But I'm not sure because I don't know what is unidentified. It can be Post component, props.type, or anything. I think I tell you what is the problem when I know specific error log — Jun, Jan 08 '21 at 06:26
I actually figured it all out for now ! Thanks again for the help. — Matt Laszcz, Jan 08 '21 at 15:23

React Router Navlink to another Page using props passed from a Parent

1 Answers1