React nested route render the parent component with the child component

Question

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>
    );
 }
}

Ryan Le · Accepted Answer · 2021-08-23 05:10:10Z

1

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.

answered Aug 23, 2021 at 5:10

Ryan Le

8,5101 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adn Over a year ago

I had to move <Route exact path='/employee' component={EmployeeIndex} /> to bottom, before </Switch>, to make it work.

kaych22 · Accepted Answer · 2021-08-23 05:05:27Z

1

Here what I use in my apps. Make separate components for all pages and import in App.js under src. Make use of state and props to store the data and create ID. Install npm i react-router-dom to access react route.

import { Switch, Route, Redirect } from "react-router-dom";
<Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/employee" component={Employee} />
    <Route exact path="/createEmployee" component={Create} />
    <Route exact path="/employeeDetails" component={Details} />
    <Redirect to = "/" />   
</Switch>

for homepage - Home.js
for employee list table - Employee.js
create employee - Create.js
go to employee's detail - Details.js
Redirect to - will redirect to homepage if exact URL is not entered.

edited Aug 23, 2021 at 5:05

answered Aug 23, 2021 at 4:59

kaych22

611 silver badge5 bronze badges

Collectives™ on Stack Overflow

React nested route render the parent component with the child component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related