Re-render React component and not refresh the entire page

Question

Whenever I try to render a new component, the entire page refreshes instead of just the components re-rendering.

The page loads and I click the drop down menu in the header, which renders a new component without a refresh. But when I click the link for "Create Account", it makes a GET request for the "/create" page. This is when React refreshes the entire browser and re-renders the header, body and footer.

I'm trying to get it to change the Href in browser but not refresh the whole page. I want it to just re-render the components that are being updated.

Here is my code that changes the components and my 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;

I believe it has something to do with how my webpack.config is setup.

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

I had the same problem... It was my form that was creating this problem. When the form submits ie the default behavior of the form reloads and re-renders the whole page.

What you can do to prevent default behavior of form is that create an event handler in react that fires on onClick event of submit button of your form or you could use the event.preventDefault() method.

Answer 2

我的猜测是您的链接没有使用历史API呈现，因此它正在重新加载链接页面，请使用react-dom-router的Link组件-https://reacttraining.com/react-router/网络/ API /链接