重新渲染React組件，而不刷新整個頁面

Question

每當我嘗試渲染新組件時，整個頁面都會刷新，而不僅僅是重新渲染組件。

頁面加載完畢，然后單擊標題中的下拉菜單，該菜單將呈現新組件而無需刷新。 但是，當我單擊“創建帳戶”的鏈接時，它會向“ /創建”頁面發出GET請求。 這是React刷新整個瀏覽器並重新渲染頁眉，正文和頁腳的時候。

我試圖讓它更改瀏覽器中的Href，但不刷新整個頁面。 我希望它只是重新呈現正在更新的組件。

這是更改組件和webpack.config的代碼。

import React, { Component } from 'react';
import Body from './components/body/body';
import Header from './components/header/header';
import Footer from './components/footer/footer';
import SignUp from './components/sign-up-form/sign-up-form';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
import './stylesheets/style.scss'

class App extends Component {
render() {
    return(
        <div>
            <Header />
            <Router>
                <div>
                <Route exact={true} path="/" component={Body} />
                <Route path="/create" component={SignUp} />
                </div>
            </Router>
            <Footer />
        </div>
    )
}
}

export default App;

我相信這與我的webpack.config的設置有關。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
entry: {
    app: "./index.js"
},
output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, "dist")
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
            } 
        },
        {
            test: /\.scss$/,
            use: [
                "style-loader",
                "css-loader",
                "sass-loader"
            ]
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader'
            ]
        },
        {
            test: /\.(woff|woff2|eot|tff|otf)$/,
            use: [
                'file-loader'
            ]
        }
    ]
},
devServer: {
    historyApiFallback: true,
},
plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
        inject: true,
        template: "index.html",
        appMountId: 'app'
    })
]
};

Answer 1

我遇到了同樣的問題...正是我的表格造成了這個問題。 當表單提交時，即表單的默認行為會重新加載並重新呈現整個頁面。

您可以采取以下措施來防止表單的默認行為：在react中創建一個事件處理程序，該事件處理程序會在表單的Submit按鈕的onClick事件上觸發，或者可以使用event.preventDefault（）方法。

Answer 2

我的猜測是您的鏈接沒有使用歷史API呈現，因此它正在重新加載鏈接頁面，請使用react-dom-router的Link組件-https://reacttraining.com/react-router/網絡/ API /鏈接