如何在preact-cli创建的Preact应用中无需eject添加react-router

1. 安装依赖 #

首先安装react-router-dom包：

npm install react-router-dom
# 或使用yarn
yarn add react-router-dom

如果你的项目使用Preact 10及以上版本，可以直接使用Preact内置的compat兼容层，无需额外安装preact-compat包，配置时直接指向preact/compat即可

2. 新增自定义webpack配置 #

Preact CLI 支持通过根目录下的preact.config.js文件扩展webpack配置，完全不需要执行eject操作。
在项目根目录新建preact.config.js文件，写入以下配置：

// preact.config.js
export default (config, env, helpers) => {
  // 扩展别名配置，把react/react-dom指向preact兼容层
  config.resolve.alias = {
    ...config.resolve.alias,
    // 如果你用的是单独安装的preact-compat
    'react': 'preact-compat',
    'react-dom': 'preact-compat'
    // Preact 10+ 内置compat的话替换为下面两行
    // 'react': 'preact/compat',
    // 'react-dom': 'preact/compat'
  }
}

3. 正常使用react-router-dom #

配置完成后重启本地开发服务，你原有的导入语句可以直接正常使用，不需要做任何修改：

import {BrowserRouter as Router, Route, Switch, NavLink} from 'react-router-dom';

后续直接按照react-router-dom的常规用法编写路由逻辑即可。

内容的提问来源于stack exchange，提问作者Matt