如何使用 bundle.js 文件在 react-router-dom 中渲染组件？

Question

我创建了一个网络应用程序并使用 react-router-dom 在应用程序中进行导航。当我使用 webpack-dev-server 启动应用程序时一切正常，现在是时候在我的服务器上部署这个应用程序了，所以我使用 webpack 命令创建了这个应用程序的捆绑文件，但是 react-router-dom 是无论是否添加开关，都不使用 bundle.js 文件渲染任何组件。

还有一件事，当我点击 URL 或刷新页面时，即使在 webpack-dev-server 中，我也会收到错误 "webpage not found"。我希望我的应用程序也能使用 url，而不仅仅是 Link 和 Push。这是我的代码

import {        
    Router,
    Route,
    Switch
} from "react-router-dom";
import { Provider } from "react-redux";
import history from "./config/History";

import store from "./store";

const router = (
    <Provider store={store}>
        <Router history={history}>
            <div>
                <Header />
                <Switch>
                    <Route exact path="/" component={Login} />
                    <Route path="/login" component={Login} />
                    <Route path="/create/questions" component={CreateQuestion} />
                    <Route path="/create/quiz" component={CreateQuiz} />
                </Switch>
            </div>
        </Router>
    </Provider>
)

ReactDOM.render(router, document.getElementById("root"));

Answer 1

我已经使用 HashRouter 解决了这个问题。路由器存在一些安全问题，因此您必须运行它在服务器上，例如 express 服务器，如果您想使用它。

这是我更新后的代码。对于历史，我正在使用历史中的 CreateHashHistory 函数。

import {
    HashRouter,
    Route,
    Switch
} from "react-router-dom";

<Provider store={store}>
    <HashRouter history={history}>
        <div>
            <Header />
            <Switch>
                <Route exact path="/" component={Login} />
                <Route exact  path="/login" component={Login} />
                <Route exact  path="/create/questions" component={CreateQuestion} />
                <Route exact  path="/create/quiz" component={CreateQuiz} />
            </Switch>
        </div>
    </HashRouter>
</Provider>

如何使用 bundle.js 文件在 react-router-dom 中渲染组件？

How to render components in react-router-dom with bundle.js file?

reactjs

react-router

react-router-dom