Reactjs 即使url发生更改，路由组件也不会呈现。使用自定义网页包

下面是我的文件结构

webpack.config.js如下所示

const path = require("path");

const HtmlWebPackPlugin = require("html-webpack-plugin");

const entryPoint = path.join(__dirname, "src", "index.js");

module.exports = {
  entry: entryPoint,
  output: {
    path: path.join(__dirname, "public"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.join(__dirname, "public", "index.html"),
      filename: "./index.html",
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, "public"),
    historyApiFallback: true,
    // publicPath: "/dist/",
  },
  devtool: "source-map",
  stats: {
    errorDetails: true,
  },
};

我不知道为什么即使我给了历史一个退路，它仍然不起作用

下面是我的app.js

当我点击

/home

路线时，内容没有改变

谁能解释一下我还有什么要补充的吗

还有我的index.js

---

您需要将

精确的
添加到您的
/
路线中，否则它将匹配以
/
开头的任何内容，并且由于它位于
开关中，因此它将是唯一要匹配的

    <Switch>
      <Route exact path="/" component={() => <div>i am in home</div>} />
      <Route exact path="/home" component={() => <div> i am user</div>} />
    </Switch>


我在家}/>
我是用户}/>

如果url没有参数化，我也会将
exact
添加到
/home

请看：
也许我的问题听起来很傻，但你是否已将你的
应用程序
包装在
浏览器路由器
中？是的。我已经编辑了问题add
exact
道具到每个路由。我认为您需要使用
render
而不是
component
：在react router dom v4中，不需要将exact添加到两个路由。如果你能在以前的孤零零的家里work@ShivaSai如果您知道只需要确切的路由，则使用
exact
更安全，这样您就不必在以后添加
/home/“id
路由时进行调试。此外，如果不使用
exact
，路由的顺序也变得很重要。