React Switch Route без перезагрузки всей страницы - PullRequest
Новая
       44

React Switch Route без перезагрузки всей страницы

0 голосов
/ 07 февраля 2019

Я знаю, что в интернете много примеров, но я не могу решить мою проблему.

У меня есть Маршрутизатор с Маршрутом.Я хочу динамически загрузить часть страницы в фоновом режиме и заменить их.Когда я нажимаю на ссылку в меню, вся страница перезагружается, а не обновляет часть страницы.

Как изменить этот код для загрузки компонента с сервера и замены части страницы?

Лучше для меня,будут показаны рабочие примеры, и я попытаюсь подумать, где внести изменения.

Я использую webpack и semantic-ui-react

index.js 

import React from 'react';
import ReactDOM from 'react-dom';

import Main from './pages/Main.jsx';
import Company from './pages/Company.jsx';
import Account from './pages/Account.jsx';
import Contact from './pages/Contact.jsx';

import { Router, Route, Switch, History, withRouter } from "react-router";
import { createBrowserHistory } from 'history';

import MainMenu, {VerticalSidebar} from './MainMenu.jsx';
import Footer from './Footer.jsx';


import 'semantic-ui-css/semantic.min.css';
import './style.css';

import { Sidebar, Component} from 'semantic-ui-react'


export class App extends React.Component {
    state = {
        dimmed: false,
        visible: false,
        width: 0,
        height: 0,
    }
    handleShowClick = () => {this.setState({
        visible: true,
        dimmed: true
    }),document.body.classList.add('hideOverflow')}
    handleHideClick = () => {this.setState({
        visible: false,
        dimmed: false
    }),document.body.classList.remove('hideOverflow')}
    handleSidebarHide = () => {this.setState({
        visible: false,
        dimmed: false
    }),document.body.classList.remove('hideOverflow')}

    updateDimensions(){
        document.querySelector('div.pushable div.pusher').style.minHeight = (window.innerHeight-document.querySelector('div.pushable div.footer').clientHeight-document.querySelector('div.pushable div.pusher div.menu').clientHeight)+'px';
    }
    componentDidMount(){
        this.updateDimensions();
        window.addEventListener("resize", this.updateDimensions.bind(this));
    }

    componentWillUnmount(){
        window.removeEventListener("resize", this.updateDimensions.bind(this));
    }

    render(){
        return (
        <>
            <VerticalSidebar visible={this.state.visible} handleHideClick={this.handleHideClick}/>
            <Sidebar.Pushable as='div' >

                <Sidebar.Pusher dimmed={this.state.dimmed} style={{width: '100%'}}>
                <MainMenu handleShowClick={this.handleShowClick}/>
    //I think that problem is below//////////
                    <Router history={createBrowserHistory()}>
                        <Switch>
                            <Route exact path="/" component={Main} />
                            <Route path="/companypage" component={Company} />
                            <Route path="/accountpage" component={Account} />
                            <Route path="/contactpage" component={Contact} />
                        </Switch>
                    </Router>
                </Sidebar.Pusher>
                <Footer/>
            </Sidebar.Pushable>
        </>
        )
    }
}

ReactDOM.render(
    <App/>, document.getElementById('app')
);

MainMenu.jsx 

<Menu>
    <Menu.Item as='a' href="/">
    <Menu.Item as='a' href="/companypage">
    <Menu.Item as='a' href="/accountpage">
    <Menu.Item as='a' href="/contactpage">
</Menu>

1 Ответ

0 голосов
/ 11 февраля 2019

Вы должны хранить те компоненты внутри коммутатора, которые вы хотите обновить.А те, кого вы не хотите обновлять, держите их вне поля.Примерно так. 

<Header />
<Switch>
<DynamicPage />
<DynamicPage2 />
</Switch>
<Footer />

Надеюсь, это поможет!

...