React router меняет URL, но не загружает веб-страницу должным образом - PullRequest
Новая
       40

React router меняет URL, но не загружает веб-страницу должным образом

0 голосов
/ 09 июня 2018

Я работаю над проектом 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);

1 Ответ

0 голосов
/ 14 июня 2018

После долгих исследований я нашел ответ на свою проблему.

В React Router, если мы перенаправляем на новый маршрут, библиотеки JS не загружаются.В моем случае я использовал плагины, которые внедряли элементы HTML после завершения загрузки страницы.

Теперь реактивная маршрутизация не будет загружать страницу, поскольку все здесь - виртуальный DOM, поэтому решение здесь заключалось в том, чтобызагрузите библиотеки JS после завершения маршрутизации.

Поэтому я использовал пакет loadjs .

1) Установка 

yarn add loadjs

2) Импорт 

import loadjs from 'loadjs';

3) Вызовите его в componentDidMount () компонента React 

loadjs('./js/modernizr.js', () => {});

, и это решит проблему.

...