React 路由器正在更改 URL 但未正确加载网页 [英] React router is changing the URL but not loading the webpage properly

问题描述

我正在开发一个 React JS 项目，在该项目中我使用 React Router v4 创建客户端路由.

这是项目的实时网址:https://gokhana.herokuapp.com/

在主页上，客户将搜索城市/位置(仅限印度城市)，只要客户选择位置(https://prnt.sc/jsy8rp)，我想加载下一条路线，即https://gokhana.herokuapp.com/restaurants.

我正在使用 将页面重定向到 /restaurants 路由.

当/restaurants 路由被加载时，页面没有正确加载，一切都乱七八糟.检查它是如何加载 https://prnt.sc/jsy96i

现在，如果我重新加载相同的 URL，页面会正确加载而没有任何问题 https://prnt.sc/jsya4t

使用 <Redirect/> 重定向到路由会产生问题，而重新加载相同的路由可以正常工作.

我已经检查了 CSS 和 JS 文件，所有这些文件都正确加载.

我无法弄清楚这个问题.

app.js 文件

从'react'导入React；从 'react-dom' 导入 ReactDOM；从'react-redux'导入{Provider}；从./store"导入商店；从'jquery'导入$；导入 'bootstrap/dist/css/bootstrap.min.css';从./routes/AppRouter"导入路由器；//导入CSS文件导入'./styles/google-font.css';导入'./styles/base.css';ReactDOM.render(<提供者商店={商店}><路由器/></提供者>,document.getElementById('root'));

index.html 文件

<头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>GoKhana</title><link rel="icon" type="image/png" href="./images/favicon.png"><link rel="stylesheet" type="text/css" href="./dist/styles.css"><身体><div id="root"></div><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmnIFpWp5ofkwDLZgCDLBat1VPEjOj_jA&libraries=places"></script><script src="./dist/bundle.js"></script><script src="./js/common_scripts_min.js"></script><script src="./js/functions.js"></script><script src="./js/modernizr.js"></script><script src="./js/cat_nav_mobile.js"></script><script>$('#cat_nav').mobileMenu();</script><script src="./js/ion.rangeSlider.js"></script><script src="./js/cat_nav_mobile.js"></script><script src="./js/theia-sticky-sidebar.js"></script><script src="./js/bootstrap3-wysihtml5.min.js"></script><script src="./js/dropzone.min.js"></script><script src="./js/tabs.js"></script><script src="./js/custom.js"></script></html>

AppRouter.js 文件

从'react'导入React；从react-router-dom"导入 {BrowserRouter, Route, Switch};从./../components/HomePage"导入主页；从./../components/AboutUs"导入关于我们；从'./../components/ContactUs'导入ContactUs；从'./../components/PageNotFound'导入PageNotFound；从'../components/RestaurantList'导入RestaurantList；从 '../components/RestaurantMenu' 导入 RestaurantMenu；从 '../components/UserDetails' 导入 UserDetails；从'../components/OrderConfirmation'导入订单确认；从 '../components/CustomerAccount' 导入 CustomerAccount；导出默认值 () =>{返回 (<浏览器路由器><开关><Route path="/" component={HomePage} exact={true}/><Route path="/about" component={AboutUs}/><Route path="/contact" component={ContactUs}/><Route path="/restaurants" component={RestaurantList}/><Route path="/select-menu" component={RestaurantMenu}/><Route path="/user-details" component={UserDetails}/><Route path="/order-confirmation" component={OrderConfirmation}/><Route path="/my-account" component={CustomerAccount}/><路由组件={PageNotFound}/></开关></BrowserRouter>);}

RestaurantList.js - 这个组件很乱

从'react'导入React；从'./sections/Header'导入标题；从'./sections/Footer'导入页脚；从 './sections/ImageSubHeader' 导入 ImageSubHeader；从./sections/Filters"导入过滤器；从./sections/DisplayRestaurants"导入 DisplayRestaurants；导出默认值 () =>{返回 (<div><标题/><ImageSubHeader title="搜索您最喜欢的餐厅" showSearch = "true"/><div className="容器边距_60_35"><div className="row"><过滤器/><展示餐厅/>

<页脚/>

);}

ImageSubHeader.js

 import React from 'react';从'./../../images/web-images/mainbanner.jpg'导入subHeaderImg；导出默认值(道具)=>{返回 (<section className="parallax-window" id="short" data-parallax="scroll" data-image-src={subHeaderImg} data-natural-width="1400" data-natural-height="350"><div id="子标题"><div id="sub_content"><h1>{props.title}</h1><p>{props.subTitle}</p>{props.showSearch &&(<form method="post" action="list_page.html"><div id="自定义搜索输入"><div className="输入组"><input type="text" className="search-query" placeholder="您的地址或邮政编码"/><span className="input-group-btn"><input type="submit" className="btn_search" value="submit"/></span>