Dynamically render a react component with react routing, based on value given in url

There are few approaches
1. As mentioned above to let project component decide what should be rendered based on match.params

const routes = {
 'my-route1': <MyComponent1 />,
 'my-route2': <MyComponent2 />
}

const Project = props => {
  const { projectName } = props.match.params
  return routes[projectName] || <DefaultComponent />
}

2. You may define your own routes components who will decide which component to Render based on state. It is helpful when you need to create master pages or templates and do not want any dependencies on match inside other components.

    const PrivateRoute = ({ component: Component, ...rest }) => {
      const func = props => (!!rest.isUserAllowedToNavigate()
        ? <Component {...props} />
        : (
          <Redirect to={
              {
                pathname: '/login',
                search: props.location.pathname !== '/' && queryStringComposer({
                  redirect_from: props.location.pathname || getQueryStringParam('redirect_from')
                })
              }
            }
          />
        )
      )
      return (<Route {...rest} render={func} />)
    }
    /* Connecting to redux */
    const PrivateRouteConnected = connect(mapStateToProps, mapDispatchToProps)(PrivateRoute)
    /* Using as normal routes */
    <PrivateRouteConnected exact path="/dashboard" component={Dashboard} />

your Project component can handle the logic to render a different component based on the URL param. For example:

const Project = props => {
  const { projectName } = props.match.params
  if (projectName === project1) {
    return <ProjectOne addProps={addProps} />
  }
  if (projectName === project2) {
    return <ProjectTwo />
  }
  return <DefaultProject />
}