react-router - sub-routes not showing

Question

Im trying to implement react-router and something is missing. I cannot browse to

domain.com/projects/-KBnGTGY0WZQSZIa7nRc

Which i expect to be a sub-domain of projects with a projectId

This is my routes setup

<Router history={new HashHistory}>
    <Route path="/" component={Main}>
        <Route path="profile" component={Profile}   onEnter={requireAuth}  />
        <Route path="projects" component={Projects} >
           <Route path="/projects/:projectId" component={ProjectsDetails} />
        </Route >
        <Route path="login" component={Login} />
        <Route path="logout" component={Logout} />
        <Route path="register" component={Register} />
        <Route path="*" component={Register}/>
    </Route>
</Router>

I also Link to the sub-route like this

<Link to={`/projects/${this.props.item.key}`}>
    <h3 className="project-list-h3">{this.state.text} </h3>
</Link>

Its simply reverting to the * which is the registration page.

Is there something i need to add to the {ProjectsDetails} page? It dosnt even call it so i believe the problem is somewhere else.

Thanks

Answer 1

In the example you have provided above your route would be /projects/projects/:id. If you wish to a route like path="/projects/:projectId" you would not nest it inside the project route. I have included a link to the offical doc that gives an overview of this concept. Official docs routes .

If you have a look at the example it shows a similar nested route to yours, note that you combine the path of the parent and child to get the path of the child route.

<Router>
  <Route path="/" component={App}>
  <Route path="about" component={About} />
  <Route path="inbox" component={Inbox}>
    <Route path="messages/:id" component={Message} />
  </Route>
</Route>

/inbox/messages/:id App -> Inbox -> Message