时间戳

首页 > 解决方案 > React js中的嵌套路由不起作用

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

问题描述

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

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

医生.js

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

....
....

)

标签： reactjsreact-router-v4

解决方案

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

在我的情况下，从父路由中删除确切的问题可以解决问题，因为路由始终相同，但子路由将被更改。路线元素应该是：

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

希望这可以帮助。

推荐阅读