React js 中的嵌套路由不起作用

Question

我正在研究显示 doctors.i 列表的项目，正在尝试如下所示的嵌套路由。当我转到 /book-appointment 页面时，没有显示任何内容，也没有错误显示控制台，但没有呈现约会组件。我对嵌套路由感到困惑，我不知道我在这里犯了什么错误

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

我在我的项目中遇到了一些错误，我也创建了未找到的页面，它把我带到了那里所以我很清楚问题出在路由上。

在我的例子中，从父路由中删除 exact 解决了问题，因为路由始终相同，但子路由将被更改。路由元素应该是：

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

希望对您有所帮助。

React js 中的嵌套路由不起作用

Nested Routes in React js not working

reactjs

react-router-v4