Question

我创建了一个Web应用程序，并使用react-router-dom在应用程序中进行导航。当我使用webpack-dev-server启动应用程序时一切正常，现在是时候在服务器上部署该应用程序了，因此我已经使用webpack命令创建了该应用程序的捆绑文件，但是react-router-dom没有呈现任何组件使用bundle.js文件，或者我添加或不添加开关。

当我单击URL或刷新页面时，还有一件事，即使在webpack-dev-server中，也会出现“找不到网页”错误。我希望我的应用程序不仅可以使用链接和推送，还可以使用url。这是我的代码

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修复了此问题。路由器存在一些安全问题，因此如果要使用它，则必须在服务器（例如快递服务器）上运行它。

这是我更新的代码。对于历史记录，我使用历史记录中的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中渲染组件？

1 个答案: