I am trying to create a router for my react-app ut I get a weird error. I have tried to fix it myself, but I really can't get a solution. This is my App.js:
import React from "react";
import "App.css";
import Header from "./Header";
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
const App = () => {
return (
<Router>
<div>
<Switch>
<Route path="/checkout">
<Header />
</Route>
<Route path="/">
<Header />
<Home />
</Route>
</Switch>
</div>
</Router>
);
};
export default App;
When I now go to the url localhost:8080/checkout it gives me following error: Cannot GET /checkout.
I ran npm install react-router-dom
and in my webpack.config.js I added devServer.historyApiFallback: true
and output.publicPath: '/'
. Here is my config.js:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.[hash].js",
path: path.resolve(__dirname, "dist"),
publicPath: "/",
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
resolve: {
modules: [__dirname, "src", "node_modules"],
extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
},
devServer: {
hitoryApiFallback: true,
contentBase: path.join(__dirname, "../"),
watchContentBase: true,
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: require.resolve("babel-loader"),
},
{
test: /.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /.png|svg|jpg|gif$/,
use: ["file-loader"],
},
],
},
};
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…