反应交换路径不重装所有页面

Question

我知道，在网上找了很多的例子，但我解决不了我的问题。

我有路由器路由。我想在后台页面的动态负载部分并替换它们。当我在菜单中点击链接，所有的页面重新加载，不更新页面的一部分。

如何从服务器修改负载组件的代码和替换页面的一部分？

对我好，会显示工作的例子，我尝试想在那里进行更改。

我使用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>

Answer 1

你需要保持要被更新的内部开关的组件。而那些你不想被更新，让他们在外面开关。事情是这样的。

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

希望这可以帮助！