Вложенные маршруты в React js не работают

Question

Я работаю над проектом, в котором отображается список врачей. Я пытаюсь использовать вложенную маршрутизацию, как показано ниже. когда я захожу на страницу / book-meeting , ничего не отображается, и на консоли не отображается ошибка, но компонент встречи не отображается. меня смущают вложенные маршруты, и я не знаю, какую ошибку я здесь совершаю

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 />;
     }}
     />​

....
....

)

Answer 1

Я получил какую-то ошибку в своем проекте, и я также создал страницу not found, и она меня там перенесла. Мне стало ясно, что проблема с маршрутами.

В моем случае удаление точных из родительских маршрутов решит проблему, поскольку маршрут всегда один и тот же, но дочерние маршруты будут изменены. Элемент маршрута должен быть:

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

Надеюсь, это поможет.