Peter
Peter

Reputation: 501

React Switch Route without reload all page

I know that in internet is a lot of examples, but I can't resolve my problem.

I have Router with Route. I want to dynamic load part of page in background and replace them. When I click link in menu, all page is reloading, not update part of page.

How to modify this code for load component from server and replace part of page?

Better for me, will be show working examples and I try thinking where make changes.

I'm using webpack and 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>

Upvotes: 1

Views: 5282

Answers (1)

JupiterAmy
JupiterAmy

Reputation: 384

You need to keep those components inside switch which you want to be updated. And those you don't want to be updated, keep them outside the switch. Something like this.

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

Hope this helps!

Upvotes: 2

Related Questions