Маршрутизатор React изменяет URL-адрес, но не загружает веб-страницу должным образом
Я работаю над проектом React JS, внутри проекта я использую React Router v4 для создания маршрута на стороне клиента.
Это текущий URL проекта: https://gokhana.herokuapp.com/
На домашней странице клиент будет искать город / местоположение (только для городов Индии), всякий раз, когда клиент выбирает местоположение (https://prnt.sc/jsy8rp), я хочу загрузить следующий маршрут, то есть https://gokhana.herokuapp.com/restaurants.
Я использую <Redirect /> для перенаправления страницы на маршрут /restaurants.
При загрузке маршрута /restaurants страница не загружается должным образом, все перепутано. Проверь вот как загружается https://prnt.sc/jsy96i
Теперь, если я перезагружу тот же URL, страница загрузится правильно без проблем https://prnt.sc/jsya4t
Перенаправление на маршрут с помощью <Redirect /> создает проблему, в то время как перезагрузка того же маршрута работает нормально.
Я проверил файлы CSS и JS, все они загружаются правильно.
Я не могу понять эту проблему.
файл app.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import store from './store';
import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.min.css';
import Routers from './routes/AppRouter';
//Import CSS files
import './styles/google-font.css';
import './styles/base.css';
ReactDOM.render(
<Provider store = {store}>
<Routers />
</Provider>,
document.getElementById('root')
);
index.html файл
<!DOCTYPE html>
<html>
<head>
<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">
</head>
<body>
<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>
</body>
</html>
Файл AppRouter.js
import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import HomePage from './../components/HomePage';
import AboutUs from './../components/AboutUs';
import ContactUs from './../components/ContactUs';
import PageNotFound from './../components/PageNotFound';
import RestaurantList from '../components/RestaurantList';
import RestaurantMenu from '../components/RestaurantMenu';
import UserDetails from '../components/UserDetails';
import OrderConfirmation from '../components/OrderConfirmation';
import CustomerAccount from '../components/CustomerAccount';
export default () => {
return (
<BrowserRouter>
<Switch>
<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} />
<Route component = {PageNotFound} />
</Switch>
</BrowserRouter>
);
}
RestaurantList.js - этот компонент испорчен
import React from 'react';
import Header from './sections/Header';
import Footer from './sections/Footer';
import ImageSubHeader from './sections/ImageSubHeader';
import Filters from './sections/Filters';
import DisplayRestaurants from './sections/DisplayRestaurants';
export default () => {
return (
<div>
<Header />
<ImageSubHeader title = "Search your Favorite Restaurant" showSearch = "true" />
<div className = "container margin_60_35">
<div className = "row">
<Filters />
<DisplayRestaurants />
</div>
</div>
<Footer />
</div>
);
}
ImageSubHeader.js
import React from 'react';
import subHeaderImg from './../../images/web-images/mainbanner.jpg';
export default (props) => {
return (
<section className = "parallax-window" id = "short" data-parallax = "scroll" data-image-src = {subHeaderImg} data-natural-width = "1400" data-natural-height = "350">
<div id = "subheader">
<div id = "sub_content">
<h1>{props.title}</h1>
<p>{props.subTitle}</p>
{props.showSearch &&
(<form method = "post" action = "list_page.html">
<div id = "custom-search-input">
<div className = "input-group ">
<input type = "text" className = " search-query" placeholder = "Your Address or postal code" />
<span className = "input-group-btn">
<input type = "submit" className = "btn_search" value = "submit" />
</span>
</div>
</div>
</form>)
}
{props.showOrder &&
(
<div className = "bs-wizard">
<div className = {(props.orderId >=1) ? "col-xs-4 bs-wizard-step complete" : "col-xs-4 bs-wizard-step disabled"}>
<div className = "text-center bs-wizard-stepnum"><strong>1.</strong> Your details</div>
<div className = "progress"><div className = "progress-bar"></div></div>
<a href = "#0" className = "bs-wizard-dot"></a>
</div>
<div className = {(props.orderId >=2) ? "col-xs-4 bs-wizard-step complete" : "col-xs-4 bs-wizard-step disabled"}>
<div className = "text-center bs-wizard-stepnum"><strong>2.</strong> Payment</div>
<div className = "progress"><div className = "progress-bar"></div></div>
<a href = "cart_2.html" className = "bs-wizard-dot"></a>
</div>
<div className = {(props.orderId >=3) ? "col-xs-4 bs-wizard-step complete" : "col-xs-4 bs-wizard-step disabled"}>
<div className = "text-center bs-wizard-stepnum"><strong>3.</strong> Finish!</div>
<div className = "progress"><div className = "progress-bar"></div></div>
<a href = "cart_3.html" className = "bs-wizard-dot"></a>
</div>
</div>
)
}
</div>
</div>
</section>
);
}
Filters.js
import React from 'react';
export default () => {
return (
<div className = "col-md-3">
<div id = "filters_col">
<a
data-toggle = "collapse"
href = "#collapseFilters"
aria-expanded = "false"
aria-controls = "collapseFilters"
id = "filters_col_bt
">
Filters
<i className = "icon-plus-1 pull-right"></i>
</a>
<div className = "collapse" id = "collapseFilters">
<div className = "filter_type">
<h6>Distance</h6>
<input type = "text" id = "range" value = "" name = "range" />
<h6>Type</h6>
<ul>
<li><label><input type = "checkbox" checked className = "icheck" />All <small>(49)</small></label></li>
<li><label><input type = "checkbox" className = "icheck" />American <small>(12)</small></label><i className = "color_1"></i></li>
<li><label><input type = "checkbox" className = "icheck" />Chinese <small>(5)</small></label><i className = "color_2"></i></li>
<li><label><input type = "checkbox" className = "icheck" />Hamburger <small>(7)</small></label><i className = "color_3"></i></li>
<li><label><input type = "checkbox" className = "icheck" />Fish <small>(1)</small></label><i className = "color_4"></i></li>
<li><label><input type = "checkbox" className = "icheck" />Mexican <small>(49)</small></label><i className = "color_5"></i></li>
<li><label><input type = "checkbox" className = "icheck" />Pizza <small>(22)</small></label><i className = "color_6"></i></li>
<li><label><input type = "checkbox" className = "icheck" />Sushi <small>(43)</small></label><i className = "color_7"></i></li>
</ul>
</div>
<div className = "filter_type">
<h6>Rating</h6>
<ul>
<li><label><input type = "checkbox" className = "icheck" /><span className = "rating">
<i className = "icon_star voted"></i><i className = "icon_star voted"></i><i className = "icon_star voted"></i><i className = "icon_star voted"></i><i className = "icon_star voted"></i>
</span></label></li>
<li><label><input type = "checkbox" className = "icheck" /><span className = "rating">
<i className = "icon_star voted"></i><i className = "icon_star voted"></i><i className = "icon_star voted"></i><i className = "icon_star voted"></i><i className = "icon_star"></i>
</span></label></li>
<li><label><input type = "checkbox" className = "icheck" /><span className = "rating">
<i className = "icon_star voted"></i><i className = "icon_star voted"></i><i className = "icon_star voted"></i><i className = "icon_star"></i><i className = "icon_star"></i>
</span></label></li>
<li><label><input type = "checkbox" className = "icheck" /><span className = "rating">
<i className = "icon_star voted"></i><i className = "icon_star voted"></i><i className = "icon_star"></i><i className = "icon_star"></i><i className = "icon_star"></i>
</span></label></li>
<li><label><input type = "checkbox" className = "icheck" /><span className = "rating">
<i className = "icon_star voted"></i><i className = "icon_star"></i><i className = "icon_star"></i><i className = "icon_star"></i><i className = "icon_star"></i>
</span></label></li>
</ul>
</div>
<div className = "filter_type">
<h6>Options</h6>
<ul className = "nomargin">
<li><label><input type = "checkbox" className = "icheck" />Delivery</label></li>
<li><label><input type = "checkbox" className = "icheck" />Take Away</label></li>
<li><label><input type = "checkbox" className = "icheck" />Distance 10Km</label></li>
<li><label><input type = "checkbox" className = "icheck" />Distance 5Km</label></li>
</ul>
</div>
</div>
</div>
</div>
);
}
DisplayRestaurants.js
import React from 'react';
import GridListRestaurant from './GridListRestaurant';
export default () => {
return (
<div className = "col-md-9">
<div id = "tools">
<div className = "row">
<div className = "col-md-3 col-sm-3 col-xs-6">
<div className = "styled-select">
<select name = "sort_rating" id = "sort_rating">
<option value = "" selected>Sort by ranking</option>
<option value = "lower">Lowest ranking</option>
<option value = "higher">Highest ranking</option>
</select>
</div>
</div>
</div>
</div>
<GridListRestaurant />
<GridListRestaurant />
</div>
);
}
ПЕРЕНАПРАВЛЕННАЯ ЛОГИКА SearchLocationBar.js
import React from 'react';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom';
import {setLocation} from './../../actions/locationActions';
import {toggleLoader} from './../../actions/loaderActions';
class SearchLocationBar extends React.Component {
location = {}
state = {
redirect : false
}
componentDidMount() {
let autocomplete = document.getElementById('autocomplete');
let GoogleMapsApi = new google.maps.places.Autocomplete((autocomplete), {
types: '(regions)',
componentRestrictions: {country: 'in'}
});
google.maps.event.addListener(GoogleMapsApi, 'place_changed', () => {
this.location = {};
const place = GoogleMapsApi.getPlace();
this.location.latitude = place.geometry.location.lat();
this.location.longitude = place.geometry.location.lng();
place.address_components.forEach((address) => {
if (address.types.includes('locality')) {
this.location.city = address.long_name;
} else if (address.types.includes('administrative_area_level_2')) {
this.location.city = address.long_name;
} else if (address.types.includes('administrative_area_level_1')) {
this.location.state = address.long_name;
}
});
this.props.setLocation(this.location);
localStorage.setItem('location',JSON.stringify(this.location));
this.setState({redirect: true});
});
}
render() {
return (
<form autoComplete = "off" method = "post">
<div id = "custom-search-input">
<div className = "input-group ">
<input
type = "text"
className = " search-query"
placeholder = "Your Address or postal code"
id = "autocomplete"
/>
{this.state.redirect ? <Redirect to='/restaurants' /> : ''}
<span className = "input-group-btn">
<input type = "submit" className = "btn_search" value = "submit" />
</span>
</div>
</div>
</form>
);
}
}
const mapStateToProps = (state) => {
return state;
};
const mapDispatchToProps = {
setLocation,
toggleLoader
};
export default connect(mapStateToProps, mapDispatchToProps)(SearchLocationBar);
укажите логику перенаправления, например код, в котором вы используете <Redirect />
—
09.06.2018 17:07
Обновлено с помощью компонентов и <Redirect /> Login. Это не единственная проблема с <Redirect />, даже если я использую <Link>, у нее такая же проблема. В меню веб-сайта есть кнопка перехода, использующая <Link>, проверьте, существует ли такая же проблема.
—
09.06.2018 17:16
Похоже, проблема не в реактивном маршрутизаторе или реакции вообще, это своего рода плагин jquery или что-то, что вводит узлы div.paralax-mirror в body прямо перед узлом div#root. Я предполагаю, что он прослушивает событие window.load или подобное, поэтому он работает нормально при перезагрузке страницы и не реагирует на динамические изменения после загрузки страницы. Я предлагаю вам пересмотреть остальной код без реакции.
—
09.06.2018 17:39
Я использую тему для этого проекта, поэтому не уверен в плагинах и их работе, но div.paralax-mirror уже есть в теме. Но я предполагаю, что когда я перенаправляю на новую страницу, уже существующий дом смешивается с новым, в результате чего он все портит. Когда мы перезагружаем, он заменяет существующий дом новым, поэтому все загружается нормально.
—
09.06.2018 17:55
Фактически, response-router просто заменяет один узел DOM другим, так что здесь нечего «перепутать». Проблема в том, что после загрузки div.paralax-mirror не знает о каких-либо новых изменениях в DOM.
—
09.06.2018 18:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
6
2 472
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
После долгих исследований я нашел ответ на свою проблему.
В React Router, если мы перенаправляем на новый маршрут, библиотеки JS не загружаются. В моем случае я использовал плагины, которые вводили элементы HTML после завершения загрузки страницы.
Теперь реагирующая маршрутизация не будет загружать страницу, поскольку здесь все является виртуальной DOM, поэтому решение здесь заключалось в том, чтобы загрузить библиотеки JS после завершения маршрутизации.
Поэтому я использовал пакет loadjs.
1) Установить
yarn add loadjs
2) Импорт
import loadjs from 'loadjs';
3) Вызовите его в componentDidMount () компонента React
loadjs('./js/modernizr.js', () => {});
и это решит проблему.
Другие вопросы по теме
Jquery hide-nav при прокрутке в реакции
Проблемы с нулевым ответом объекта сопоставления React Router
CSS, как показать только 1 строку и скрыть остальные?
Проблемы с сервером Webpack Dev
Новое реагирование, страница / html не отображается
Не может прочитать имя свойства подчеркнутого аксиома react.js
Структура: как представить поисковый ввод, поисковый запрос и результаты поиска с помощью дерева состояний mobx?
В свернутой панели все элементы одновременно реагируют на щелчок
Создайте ссылку в области изображения
Невозможно вызвать setState на отключенном компоненте
Похожие вопросы
Событие onClick в JavaScript не работает с модальными данными - Asp.Net Core MVC
Флажок, переключатели на локальном хранилище
JavaScript. Ключ словаря не является строкой?
Проблемы с нулевым ответом объекта сопоставления React Router
PHP внутри страницы Ajax
Использование локального хранилища для сохранения изображения в javascript
Как запустить функцию, нажав несколько кнопок в Javascript?
Почему не работает функция JavaScript?
JS - обернуть все дочерние элементы div в оболочку div
Новое реагирование, страница / html не отображается
Пожалуйста, опубликуйте один из компонентов, который выглядит «испорченным» - например, если страница AboutUs выглядит «испорченной», пожалуйста, опубликуйте код в компоненте AboutUs.