Question

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

Layout.js

 function fillServicesGrid()
        {

            var url = '@Url.Action("GetServices")';
            var data = ''

            $.get(url, data, function (response) {

                $("#tblServices").html("");

                $.each(response, function (i, val) {
                    $("#tblServices").append($('<tr>').append($('<td id="tdServiceID">').html(val.ServiceID)).append($('<td>').html(val.ServiceName)).append($('<td>').html(val.ServicePrice)).append($('<button type="button" class="btn btn-primary btnEdit" onclick="showmsg();">Edit</button>')));
                });

            });

            $('#tblServices').DataTable();

            $('.sorting_asc, .sorting').addClass('datatable-headerrow');
            $('.paginate_button.current').addClass('pagination-buttons');
            $('.dataTables_filter, .dataTables_length').hide();

        }

Doctors.js

function showmsg()
{
    var serviceID = $(this).closest('tr').find('#tdServiceID').text();
    alert(serviceID);



    $("#ServiceName").val("Tester");
    $("#ServicePrice").val("Testing");
}

Answer 1

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

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

<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中的嵌套路由不起作用

1 个答案: