为什么react router dom不能很好地使用我的自定义webpack，特别是不允许像"/store/:

Question

如果你不介意修改一下你的想法，这里有一个我制作的github repo的链接。。

https://github.com/williamowen65/DEMO--react-router-webpack--issue

路由是在App.js上声明的。只有两个路由/home和/store/：id'。

主页显示，而带有参数的故事页则不显示。不过，这个设置可以通过Create React应用程序进行。

Answer 1

我使用相同的代码并运行它。一切都对我有效。

#应用程序#

import React from "react";
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
import Home from "./pages/Home";
import Story from "./pages/Story";
export default function App(props) {
return (
<BrowserRouter>
<h1>HELLO</h1>
<Routes>
<Route
path='/'
exact
element={<Home />}
/>
<Route
path='/story/:id'
element={<Story />}
/>
</Routes>
</BrowserRouter>
);
}

#主页#

import React from 'react';
function Home(props) {
return (
<div>
Home
</div>
);
}
export default Home;

#故事#

import React from 'react';
import { useParams } from "react-router-dom";
function Story(props) {
const { id } = useParams();
return (
<div>
<h2>Story: <span style={{color:"red"}}>{id}</span></h2>
</div>
);
}
export default Story;

确保您通过以下URL发送IDhttp://localhost:3000/story/123

#输出#点击查看结果的图像