React nested route render the parent component with the child component

I am learning about React (Coming from ASP.NET). When I go to '/employee' it will display employee list table. But when I go to '/employee/create' it will display both the table and the create form. How to display only create employee form when I to '/employee/create' ?

export default class App extends Component {
static displayName = App.name;

render() {
    return (
        <Layout>
            <Route exact path='/' component={Home} />
            <Route path='/counter' component={Counter} />
            <AuthorizeRoute path='/fetch-data' component={FetchData} />
            <Route exact path='/employee' component={EmployeeIndex} />
            <Route path='/employee/create' component={EmployeeCreate} />
            <Route path='/employee/details/:id' component={EmployeeDetails} />
            
        </Layout>
    );
 }
}

Answer

To do that, you will need to add a <Switch> around your Routes:

import { Route, Switch } from "react-router";


<Switch>
   <Route exact path='/' component={Home} />
   <Route path='/counter' component={Counter} />
   <AuthorizeRoute path='/fetch-data' component={FetchData} />
   <Route exact path='/employee' component={EmployeeIndex} />
   <Route path='/employee/create' component={EmployeeCreate} />
   <Route path='/employee/details/:id' component={EmployeeDetails} />
</Switch>

It works just like a normal `switch-case, will only render the first matching path within your Routes.

Without <Switch> it will render ALL matching routes.