如何使用 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 指出实现此工作的一种方法是导入不属于 create-react-app 初始环境的'express'，并使用变量app 包含一些代码。但是，我实际上不知道这个文件在哪里/应该在哪里/在哪里重要/编辑等，或者是否确实需要 express，也许有一种方法可以“本地”执行此操作，而无需在我的 react 包中添加另一个模块。

这里是相关的脚本 sn-ps 以防我做错了什么。

提前致谢。

保罗。

index.js

// 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();

./app/router/

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;

编辑：package.json 如果相关

{
  "name": "myproject",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.5.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "materialize-css": "^1.0.0-rc.2",
    "moment": "^2.29.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-forms-materialize-css": "^1.0.1",
    "react-google-maps": "^9.4.5",
    "react-icons": "^4.1.0",
    "react-materialize": "^3.9.6",
    "react-redux": "^7.2.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "uuid": "^8.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

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

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