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;

Answer 1

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.