Create Dynamic route and render component in reactjs

You can make use of react-router and then configure your Routes by making use of Route params

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App () => {
  return (
     <Router>
       <Switch>
           <Route path="/directory/:profession/:country/:value" component={Name} />
           <Route path="/" component={Dashboard}/>
       </Switch>
  )
}

Now post this you can access the params in name component and fetchData from api or have any other logic

const Name = () => {
   const { profession, country, value} = useParams();

   useEffect(() => {
       // Any fetch logic based on params
   }, [profession, country, value]);

   return (
       ..
   )
}

You can read more about react-router usage here and also refer the docs

As far as I understand from the question, you can handle this through using "Redirect" component. Let there be a "Navigation" component where the "Router" is defined as you did

Navigation.js

import Name from './name';
import From from './from';

<Router>
  <Switch>
    <Route path="/from">
       <From />
    </Route>
    <Route path="/directory/:profession/:country/:value">
       <Name />
   </Route>
  </Switch>
</Router> 

and a "From" component where paths and redirections are defined. If "redirectionPath" is not null you can return "Redirect" component in render. Thus, you can redirect to and render the Name component.

From.js

import React, {Component} from 'react';
import {
    Redirect
} from "react-router-dom";


class From extends Component {
    state={
        redirectionPath: "/directory/photography/france/testA" // or setState anywhere you need.
    }

    ...

    render(){
        if(this.state.path){
            return (<Redirect to={this.state.redirectionPath} />)
        }
        return (
            <SomeComponent/>
        );
    }
}

This can be one of the solutions. Hope it works for you as well.