Re-render React component and not refresh the entire page

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"
]
,
gif)$/,
use: [
'file-loader'
]
,
tff
]
,
devServer:
historyApiFallback: true,
,
plugins: [
new CleanWebpackPlugin(["dist"]),
new HtmlWebpackPlugin(
inject: true,
template: "index.html",
appMountId: 'app'
)
]
;


2 Answers
2

I had the same problem... It was my form that was creating this problem.
When the form submits i.e 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.

My guess is that your links aren't being rendered using the history API and so it's re-loading the page for the links, use react-dom-router's Link component - https://reacttraining.com/react-router/web/api/Link

react-dom-router

Link

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.