如何使用 create-react-app 进行客户端路由

Question

tl;dr：我需要对 npx create-react-app 环境进行哪些更改才能使用 react-router 启用客户端路由？

编辑：回答我自己的问题，不要在你的应用内使用 href 链接，使用 react-router-dom 'Link'。

更详细..

我已经学习了 Andrew Mead 的 React 教程并且一切顺利。

他的设置使用了 webpack，并将以下内容插入到 webpack.config.js 文件中..

devServer:{
            contentBase:path.resolve(__dirname, 'public'),
            historyApiFallback: true
        }

..其中 historyApiFallback: true 表示他的开发服务器使用客户端路由与服务器端路由。

现在我完成了大部分教程，我决定使用 npx create-react-app 创建自己的应用。

一切正常，但路由不是客户端，也没有 webpack.config.js 文件。

我了解 CSR 的工作原理是仅提供 index.html 并在后台操作 DOM。

documentation 声明了使这项工作的一种方法是导入 'express'，它不是 create-react-app 初始环境的一部分，并包含一些使用变量 {{1} }.但是，我实际上不知道这个文件在哪里/应该在哪里/在哪里重要/编辑等，或者是否真的需要 express ，也许有一种方法可以“本地”执行此操作，而无需向我的 react 包中添加另一个模块。< /p>

这里是相关的脚本片段，以防万一我做错了。

提前致谢。

保罗。

index.js

app

./app/router/

// react imports
import React from 'react';
import ReactDOM from 'react-dom';
// materialize imports
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import './styles/customcss.css';
// redux imports
import store from './app/store';
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';
// component imports
import AppRouter from './app/router';

// app render
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <AppRouter />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

编辑：package.json（如果相关）

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import AppMainPage from "../pages/portalPage";
import ConnectedAccountPage from "../pages/accountPage";
import ConnectedPostPage from "../pages/postPage";
import { SiteWideNavBar } from "../components/sitewide/navbar";
import { SiteWideFooter } from "../components/sitewide/footer";

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <SiteWideNavBar />
      <Switch>
        <Route path="/" exact={true} component={AppMainPage} />
        <Route path="/account" exact={true} component={ConnectedAccountPage} />
        <Route path="/post" exact={true} component={ConnectedPostPage} />
      </Switch>
      <SiteWideFooter />
    </div>
  </BrowserRouter>
);

export default AppRouter;

Answer 1

一切都配置正确，问题是我在导航栏中使用了 NavItem 和 href="/" 等，而不是 react-materialize 中的 Link。

如果您遇到此问题：您应该使用来自 r-r-d 的链接，并且对于任何重定向也使用 react-router-dom。虽然这部分与我的问题无关，但如果您在这里尝试使用 prop.history.push() 方法以外的其他方法进行重定向，您可能会遇到同样的问题。