tachybase_todo/docs/tr-TR/welcome/release/v10-changelog.md

v0.10：update instructions

v0.10 has made major upgrades to dependencies, including react, react-dom, react-router, umi, and dumi.

依赖升级

• Upgrade react@^17, react-dom@^17 to react@^18, react-dom@^18 version

{
  "devDependencies": {
+   "react": "^18",
+   "react-dom": "^18",
-   "react": "^17",
-   "react-dom": "^17",
  }
}

• Upgrade react-router@5 to react-router@6

{
  "devDependencies": {
+   "react-router-dom": "^6.11.2",
-   "react-router-dom": "^5",
  }
}

react-router change description

because the upgrade of react-router requires some code changes.

Layout Component

Layout component needs to use <Outlet /> instead of props.children.

import React from 'react';
+ import { Outlet } from 'react-router-dom';

export default function Layout(props) {
  return (
    <div>
-      { props.children }
+      <Outlet />
    </div>
  );
}

if you use React.cloneElement to render the route component, you need to change it like this:

import React from 'react';
+ import { Outlet } from 'react-router-dom';

export default function RouteComponent(props) {
  return (
    <div>
-      { React.cloneElement(props.children, { someProp: 'p1' }) }
+      <Outlet context={{ someProp: 'p1' }} />
    </div>
  );
}

Change the route component to get the value from useOutletContext

import React from 'react';
+ import { useOutletContext } from 'react-router-dom';

- export function Comp(props){
+ export function Comp() {
+   const props = useOutletContext();
  return props.someProp;
}

Redirect

<Redirect> is changed to <Navigate replace />.

- <Redirect to="about" />
+ <Navigate to="about" replace />

useHistory

useNavigate is changed to useHistory.

- import { useHistory } from 'react-router-dom';
+ import { useNavigate} from 'react-router-dom';

- const history = useHistory();
+ const navigate = useNavigate();

- history.push('/about')
+ navigate('/about')

- history.replace('/about')
+ navigate('/about', { replace: true })

useLocation

useLocation<type>() is changed to useLocation.

- const location= useLocation<type>();
+ const location= useLocation();

const { query } = useLocation() is changed to useSearchParams()。

- const location = useLocation();
- const query = location.query;
- const name = query.name;
+ const [searchParams, setSearchParams] = useSearchParams();
+ searchParams.get('name');

path

All of the following are valid route paths in v6:

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

The following RegExp-style route paths are not valid in v6:

/tweets/:id(\d+)
/files/*/cat.jpg
/files-*

For more changes and api changes, please refer to react-router@6。

Docs Demo

- <code src="./demo.tsx" />
+ <code src="demo.tsx"></code>