feat(router): add basename #570

Repraance · 2023-12-18T14:23:15Z

What kind of change does this PR introduce?

Did you add tests(unit,e2e) for your changes?

Does this PR introduce a breaking change?

What needs to be documented once your changes are merged?

Repraance · 2023-12-18T14:55:47Z

packages/router-react/src/__tests__/useHref-basename.test.js

@@ -241,7 +241,7 @@ describe('useHref under a <Routes basename>', () => {
          </Router>
        );

-        expect(href).toBe('/app/');
+        expect(href).toBe('/app');


使用.. 或者 ../ 这种向上一级的相对路径，如果达到根路由（如果有basename，则basename 即为根路由）时，不再区分根路由是否带trailing slash。

因为此时没办法判断了。href 是使用当前pathname 计算的。
当pathname 不为根路由时，pathname 可以带 trailing slash，比如 /about 或者 /about/，因此最终的href的traling slash 也是带或者不带。

但是，当达到根路由时，pathname 变成了 /，此时带不带traling slash 都一样。

此外，我调查了vue-router 和react-router，他们使用向上相对路径达到根路由时，也是不再区分到底带不带 traling slash。

vue-router 在向上达到根路由时，总是带trailing slash（相当于此处为/app/）
react-router 在向上达到根路由时，总是不带traling slash（相当于此处为/app）

shuvi 此处选择了 react-router 的做法

和 vue-router 对齐，总是带上 /

packages/router-react/src/__tests__/useHref-basename.test.js

Repraance · 2023-12-18T15:02:13Z

packages/router/src/__tests__/matchRoutes.test.ts

@@ -194,57 +196,3 @@ describe('path matching', () => {
    expect(pickPaths(routes, '/page')).toEqual(['page']);
  });
 });
-
-describe('path matching with a basename', () => {


router 中basename的逻辑被完全移除，因此matchRoutes 的basename 参数也被移除了。
新版中，使用createLocation 把basename 剪掉，得到pathname，然后再matchRoutes

Repraance · 2023-12-18T15:05:19Z

packages/router/src/history/__tests__/hash-base.test.ts

-        ? window.location.href
-        : window.location.href.slice(0, hashIndex);
-
+  it('should ignore base tag', () => {


干掉了base tag，因为他跟新的hash basename 行为不符。
新版hash basename 采用了比较容易理解的react-router 做法
而旧版base tag，是把base加在#前面。因此索性移除了base tag feature。
react-router 也未支持base tag

Repraance · 2023-12-18T15:07:22Z

packages/router/src/history/browser.ts

      this._history.replaceState(
        { ...this._history.state, idx: this._index },
-        ''
+        '',
+        notMatchBasename ? this.resolve(this.location).href : undefined


如果初始url无法匹配basename，直接进行一个redirect，此处参考了vue-router的逻辑

Repraance · 2023-12-18T15:08:03Z

packages/router/src/history/hash.ts

 }

-function createHref(to: PathRecord) {
-  return (
-    getBaseHref() +


同上。
干掉了base tag，因为他跟新的hash basename 行为不符。
新版hash basename 采用了比较容易理解的react-router 做法
而旧版base tag，是把base加在#前面。因此索性移除了base tag feature。
react-router 也未支持base tag

Repraance · 2023-12-18T15:08:24Z

packages/router/src/history/hash.ts

      this._history.replaceState(
        { ...this._history.state, idx: this._index },
-        ''
+        '',
+        notMatchBasename ? this.resolve(this.location).href : undefined


同browserHistory
如果初始url无法匹配basename，直接进行一个redirect，此处参考了vue-router的逻辑

Repraance · 2023-12-18T15:11:28Z

packages/router/src/router.ts

@@ -349,7 +346,7 @@ class Router<RouteRecord extends IRouteRecord> implements IRouter<RouteRecord> {
      hash: location.hash,
      query: location.query,
      state: location.state,
-      redirected: !!location.redirectedFrom,
+      redirected: Boolean(location.redirectedFrom) || location.notMatchBasename,


如果当前url不匹配basename，需要redirect 302。
因为ReactServerView中，我们是根据 redirected 字段来重定向的。

因此，这里如果notMatchBasename为true，会被标记为 redirected: true

Repraance · 2023-12-18T15:13:49Z

packages/router/src/router.ts

+      // current.redirected means the initial url does not match basename and should redirect
+      // so we just skip all guards
+      // this logic only applies to memory history
+      skipGuards: Boolean(current.redirected)


如果当前url不匹配basename，current.redirected 会是true（看下面 redirected 的改动）
并且skipGuards，这样，到ReactServerView 的 renderApp 中时，会被redirect到加上basename 的url

liximomo · 2023-12-26T03:27:15Z

matchRoutes API 接口和以前保持一致