[英]Re-render React component and not refresh the entire page
每当我尝试渲染新组件时,整个页面都会刷新,而不仅仅是重新渲染组件。
页面加载完毕,然后单击标题中的下拉菜单,该菜单将呈现新组件而无需刷新。 但是,当我单击“创建帐户”的链接时,它会向“ /创建”页面发出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'
})
]
};
我遇到了同样的问题...正是我的表格造成了这个问题。 当表单提交时,即表单的默认行为会重新加载并重新呈现整个页面。
您可以采取以下措施来防止表单的默认行为:在react中创建一个事件处理程序,该事件处理程序会在表单的Submit按钮的onClick事件上触发,或者可以使用event.preventDefault()方法。
我的猜测是您的链接没有使用历史API呈现,因此它正在重新加载链接页面,请使用react-dom-router
的Link
组件-https://reacttraining.com/react-router/网络/ API /链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.