reactjs - Dynamically Creating Buttons in React that link to other pages

Question

I Have a container in react named post that contains a Navlink component in it. I wish for the Navlink component to take the user to the respective page based on the "props.type" as its category.

I am not sure if in my router I am using the correct syntax to correctly direct to the path dynamically based on the props.type sent to it from post.

import React from 'react';
import { Route, NavLink, Switch} from 'react-router-dom';
import HashTag from './Hashtag/Hashtag';

function post (props) { 

return (
  <article>
    <HashTag type={props.type}/>
  </article>  
 );

}
export default post;

import React from 'react';
import { render } from 'react-dom';
import { Route, NavLink, Switch } from 'react-router-dom';

const HashTag = (props) => {

    

  return (
    <div>
            <NavLink to={{
            pathname: `/${props.type}`,
            hash: '#submit',
            search: '?quick-submit=true'
            }}>{props.type}</NavLink>
            
           
        </Switch>
             <Route path=`/${props.type}` component={RothIRA} />
        </Switch>
    </div>
            );   
    }

 export default HashTag;

Answer 1

等待大神答复