React Switch Route 无需重新加载所有页面

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

您需要将这些组件保留在要更新的 switch 中。而那些你不想更新的，把它们放在交换机之外。像这样的。

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

希望这会有所帮助！