1

i am working on project that display​s list of doctors.i am trying nested routing like below. when i go to /book-appointment page nothing is displayed and there is no error shown console but appointment component is not rendered. i am confused with nested Routes and i dont know what mistake i am making here

Layout.js

<Route path="/" exact component={Sections} />
            <Route
                path="/doctors"
                render={(props) => {
                    return this.state.doctors_list.map((doctor, index) => {
                        return (
                            <Doctors
                                key={index}
                                clinic_name={doctor.clinic_name}
                                doctor_name={doctor.doctor_name}
                                speciality={doctor.speciality}
                                feedback={doctor.feedback}
                                location={doctor.location}
                                doctor_fee={doctor.doctor_fee}
                                available_days={doctor.available_days}
                                available_timing={doctor.available_timing}
                                rating={doctor.rating_percentage}
                                votes={doctor.votes}
                                images={doctor.images}
                            />
                        );
                    });
                }}
            />

Doctors.js

const Doctors = (props) => (
....
....
<Route
     path="/book-appointment"
     exact
     render={(props) => {
     return <Appointment />;
     }}
     />​

....
....

)
Ashok
  • 976
  • 3
  • 15
  • 32
  • Possible duplicate of [Nested routes with react router v4](https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4) – Bhojendra Rauniyar Apr 27 '18 at 09:34

1 Answers1

0

I got the some error in my project and I had created the not found page as well and it was taking me there So It was clear to me that the problem is with routes.

In my case removing exact from the parent routes solve the problem as the route is always the same but child routes will be changed. The route element should be:

<Route path="/" component={Sections} />
        <Route
            path="/doctors"
            render={(props) => {
                return this.state.doctors_list.map((doctor, index) => {
                    return (
                        <Doctors
                            key={index}
                            clinic_name={doctor.clinic_name}
                            doctor_name={doctor.doctor_name}
                            speciality={doctor.speciality}
                            feedback={doctor.feedback}
                            location={doctor.location}
                            doctor_fee={doctor.doctor_fee}
                            available_days={doctor.available_days}
                            available_timing={doctor.available_timing}
                            rating={doctor.rating_percentage}
                            votes={doctor.votes}
                            images={doctor.images}
                        />
                    );
                });
            }}
        />

Hope this helps.

Arun
  • 113
  • 6