Skip to content

Commit ff6e869

Browse files
MuYunyunMuYunyun
committed
chore: upgrade react-router-dom to v6
1 parent 0e95119 commit ff6e869

File tree

14 files changed

+98
-8289
lines changed

14 files changed

+98
-8289
lines changed

‎docs/主题/自定义主题.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,19 @@ react-doc theme
3232

3333
恭喜你, 此时你已经将主题开发环境配置完成。接着便可以开始愉快地定制个人主题了。
3434

35-
在所创建的主题项目中支持使用 `React 17` 以及 `less` 语法。
35+
在所创建的主题项目中使用了 `react v18`，`react-router-dom v6`，项目支持使用 `less` 语法。
3636

3737
```js
3838
import { Switch, Route } from 'react-router-dom'
3939
import styles from './index.less'
4040

4141
const CustomTheme = (props: CustomThemeProps) => {
4242
return (
43-
<Switch>
43+
<Routes>
4444
<Route path="/">
4545
<div className={styles.center}>Welcome to your own theme</div>
4646
</Route>
47-
</Switch>
47+
</Routes>
4848
)
4949
}
5050

@@ -103,5 +103,5 @@ language: en
103103
则主题项目中可以通过如下方式获取到 `config.yml` 配置属性。
104104

105105
```js
106-
const { menu, theme, user, } = DOCSCONFIG || {}
107-
```
106+
const { menu, theme, user } = DOCSCONFIG || {}
107+
```

‎docs/更新日志.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@ abbrlink: 179nqpxt
66

77
`create-react-doc` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
88

9+
### 1.9.1
10+
11+
`2022-04-05`
12+
13+
- **Enhancement**
14+
15+
- 🎈 升级基础包版本。[issue](https://github.com/MuYunyun/create-react-doc/issues/278)
16+
- 更新 react 版本从 v17 至 v18
17+
- 更新 react-router-dom 版本从 v4 至 v6。
18+
919
### 1.9.0
1020

1121
`2022-04-01`

‎packages/crd-scripts/src/web/Router.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BrowserRouter, withRouter, Route, Switch } from 'react-router-dom'
1+
import { BrowserRouter, Route, Routes } from 'react-router-dom'
22
import theme from 'crd-theme'
33
import menuSource from './crd.json'
44

@@ -53,15 +53,16 @@ function menuSourceFormat(data, routePath, article) {
5353

5454
const RoutersContainer = ({ ...props }) => {
5555
return (
56-
<Switch>
57-
<Route path="/">
58-
{() => theme({
56+
<Routes>
57+
<Route
58+
path="/*"
59+
element={theme({
5960
routeData: routeData(menuSource),
6061
menuSource: menuSourceFormat(menuSource),
6162
...props,
6263
})}
63-
</Route>
64-
</Switch>
64+
/>
65+
</Routes>
6566
)
6667
}
6768

‎packages/crd-scripts/src/web/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { hydrate } from 'react-dom'
1+
import { hydrate, render } from 'react-dom'
22
import { renderToString } from 'react-dom/server';
33
// import { hydrateRoot } from 'react-dom/client'
44
import '@babel/polyfill'
@@ -7,8 +7,8 @@ import RouterRoot from './Router'
77

88
if (ifDev) {
99
// dev render
10-
document.getElementById('root').innerHTML = renderToString(<RouterRoot />)
11-
hydrate(
10+
// document.getElementById('root').innerHTML = renderToString(<RouterRoot />)
11+
render(
1212
<RouterRoot />,
1313
document.getElementById('root'),
1414
)

‎packages/crd-seed/component/NoMatch/index.js‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
1+
import { Outlet } from 'react-router-dom'
12
import styles from './index.less'
23

34
const NoMatch = () => {
5+
console.log('test 404')
46
// eslint-disable-next-line no-undef
57
const { user, repo } = DOCSCONFIG || {}
68
return (
7-
<table className={styles.noMatch}>
8-
<tbody>
9-
<tr>
10-
<td>
11-
<h1>404</h1>
12-
<div>你似乎来到了没有知识存在的荒原...</div>
13-
<section>在 github 访问<a href={`https://github.com/${user}/${repo}`}>该项目</a></section>
14-
</td>
15-
</tr>
16-
</tbody>
17-
</table>
9+
<>
10+
<table className={styles.noMatch}>
11+
<tbody>
12+
<tr>
13+
<td>
14+
<h1>404</h1>
15+
<div>你似乎来到了没有知识存在的荒原...</div>
16+
<section>在 github 访问<a href={`https://github.com/${user}/${repo}`}>该项目</a></section>
17+
</td>
18+
</tr>
19+
</tbody>
20+
</table>
21+
<Outlet />
22+
</>
1823
)
1924
}
2025

‎packages/crd-seed/component/Tags/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link, useRouteMatch } from 'react-router-dom'
1+
import { Link, useMatch } from 'react-router-dom'
22
import { ifProd } from 'crd-client-utils'
33
import { ifAddPrefix } from '../../utils'
44
import styles from './index.less'
@@ -9,7 +9,7 @@ import styles from './index.less'
99
const Tags = () => {
1010
const { user, repo } = DOCSCONFIG || {}
1111
const path = ifAddPrefix ? `/${repo}/tags/:name` : '/tags/:name'
12-
const routeMatch = useRouteMatch(path) || {}
12+
const routeMatch = useMatch(path) || {}
1313
const { name } = routeMatch.params || {}
1414

1515
return (

‎packages/crd-seed/index.js‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
1-
import { Switch, Route } from 'react-router-dom'
1+
import { Routes, Route, Navigate } from 'react-router-dom'
22
import BasicLayout from './layout'
33
import NoMatch from './component/NoMatch'
44
import './index.less'
55

66
// run in the Web/Router.js
77
const ThemeSeed = (props) => {
88
return (
9-
<Switch>
10-
<Route path="/404">
11-
<NoMatch />
12-
</Route>
13-
<Route path="/">
14-
<BasicLayout {...props} />
15-
</Route>
16-
</Switch>
9+
<Routes>
10+
<Route path="/*" element={<BasicLayout {...props} />} />
11+
<Route path="/404" element={<NoMatch />} />
12+
</Routes>
1713
)
1814
}
1915

‎packages/crd-seed/layout/index.js‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { Switch, Link, Route, Redirect, useLocation } from 'react-router-dom'
2+
import { Routes, Link, Route, Navigate, useLocation } from 'react-router-dom'
33
import cx from 'classnames'
44
import { ifDev, ifProd, ifPrerender } from 'crd-client-utils'
55
import Menu from '../component/Menu'
@@ -104,7 +104,7 @@ function BasicLayout({
104104
</span>
105105
) : (
106106
<Link
107-
to={ifProd ? `/${repo}${path}` : path}
107+
to={ifProd ? `/${repo}${path}` : `${path}`}
108108
replace={pathname.indexOf(path) > -1}
109109
>
110110
{item && item.mdconf && item.mdconf.title
@@ -245,12 +245,11 @@ function BasicLayout({
245245
[`${styles["content-fullpage"]}`]: inlineCollapsed || isMobile,
246246
})}
247247
>
248-
<Switch>
248+
<Routes>
249249
{/* see https://reacttraining.com/react-router/web/api/Redirect/exact-bool */}
250250
<Route
251-
exact
252251
path={ifAddPrefix ? `/${repo}` : `/`}
253-
render={() => <Redirect to={ifAddPrefix ? `/${repo}/${defaultPath}` : `/${defaultPath}`} />}
252+
element={<Navigate to={ifAddPrefix ? `/${repo}/${defaultPath}` : `/${defaultPath}`} replace />}
254253
/>
255254
{routeData.map((item) => {
256255
const { path, mdconf, component } = item
@@ -260,35 +259,30 @@ function BasicLayout({
260259
return (
261260
<Route
262261
key={enhancePath}
263-
exact
264262
path={ifAddPrefix ? `/${repo}${enhancePath}` : enhancePath}
265-
>
266-
<Comp {...item} />
267-
</Route>
263+
element={<Comp {...item} />}
264+
/>
268265
)
269266
})}
270267
{
271268
tags
272269
? <>
273270
<Route
274271
key='/tags'
275-
exact
276272
path={ifAddPrefix ? `/${repo}/tags` : '/tags'}
277-
>
278-
<Tags />
279-
</Route>
273+
element={<Tags />}
274+
/>
280275
<Route
281276
key='/tags/:name'
282277
path={ifAddPrefix ? `/${repo}/tags/:name` : '/tags/:name'}
283-
>
284-
<Tags />
285-
</Route>
278+
element={<Tags />}
279+
/>
286280
</>
287281
: null
288282
}
289283
{/* Todo: follow up how to use Redirect to back up the rest of route. */}
290284
{/* <Redirect path='/' to={ifAddPrefix ? `/${repo}/404` : `/404`} /> */}
291-
</Switch>
285+
</Routes>
292286
{renderPageFooter()}
293287
</div>
294288
)

‎packages/crd-seed/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"main": "index.js",
66
"dependencies": {
77
"crd-client-utils": "^1.8.2",
8-
"react-router-dom": "^5.1.0",
8+
"react-router-dom": "^6.3.0",
99
"react-switch": "^5.0.1"
1010
},
1111
"repository": {

‎packages/crd-templates/theme/default/_index.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
// The position of current index.js should be kept.
2-
import { Switch, Route, Redirect } from 'react-router-dom'
2+
import { Routes, Route, Navigate } from 'react-router-dom'
33
import styles from './index.less'
44

55
const {{name}} = ({routeData, menuSource}) => {
66
return (
77
<div className={styles.center}>
8-
<Switch>
9-
<Redirect exact from="/" to="/Introduction/hello_world" />
8+
<Routes>
9+
<Route
10+
path='/'
11+
element={<Navigate to="/Introduction/hello_world" replace />}
12+
/>
1013
{routeData.map((item) => {
1114
const Comp = item.component
1215
return (
1316
<Route
1417
key={item.path}
15-
exact
1618
path={item.path}
17-
>
18-
<Comp {...item} />
19-
</Route>
19+
element={<Comp {...item} />}
20+
/>
2021
)
2122
})}
22-
</Switch>
23+
</Routes>
2324
</div>
2425
)
2526
}

0 commit comments

Comments
 (0)