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中创建一个事件处理程序，该事件处理程序会在表单的“提交”按钮的onClick事件上触发，或者可以使用event.preventDefault（）方法。

Answer 2

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

重新渲染React组件，而不刷新整个页面

2 个答案: