React, Typescript 다른 페이지로 이동하는 거

react 17.2.4, typescript 4.3.5, ag-grid 26.1.0, openjdk 17, spring, ibatis, mariadb 기술 스택을 기반으로
react 테스트 수행화면에서 시나리오 목록의 ag-grid에 하나의 행의 체크 박스를 체크하고 상위에 있는 Result 버튼을 클릭하면 ag-grid의 test_id, scenario_id 파라메터 값을 가지고 Rsult 화면으로 이동하는 예제 만들어 주세요

You're absolutely right to point that out\! The error "react-router-dom has no exported member 'useNavigate'" typically indicates a version mismatch.

Here's why this error occurs and how to fix it:

The Problem: Version Mismatch

• useNavigate is a hook introduced in react-router-dom v6.
• If you're getting this error, it means you're likely trying to use useNavigate with an older version of react-router-dom, most commonly v5 or earlier. In v5, you would use useHistory instead.

The Solution: Upgrade react-router-dom to v6 (or later)

To resolve this, you need to upgrade your react-router-dom package to version 6 or newer.

1. Uninstall the current version:

   npm uninstall react-router-dom

2. Install the latest version (v6+):

   npm install react-router-dom

   This will install the latest stable version, which is currently v6.x.x.

3. Install @types/react-router-dom (if using TypeScript):

   npm install @types/react-router-dom

   It's crucial to also update the type definitions to match the react-router-dom version. In some cases, react-router-dom v6 has its own built-in types, making @types/react-router-dom unnecessary or even problematic if it's an outdated version. If you still encounter type errors after upgrading, try removing @types/react-router-dom and see if the issue resolves.

Important Changes in react-router-dom v6:

When upgrading from v5 to v6, there are several breaking changes you need to be aware of and adapt your code for:

• <Switch> is replaced by <Routes>:

  • Old (v5):

    import { Switch, Route } from 'react-router-dom';
    
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route path="/about" component={AboutPage} />
    </Switch>

  • New (v6):

    import { Routes, Route } from 'react-router-dom';
    
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>

• component prop is replaced by element prop: As shown above, instead of component={Component}, you now use element={<Component />}.
• exact prop is no longer needed: In v6, routes are matched exactly by default. You can use the * wildcard for nested routes.

• useHistory is replaced by useNavigate:

  • Old (v5):

    import { useHistory } from 'react-router-dom';
    const history = useHistory();
    history.push('/some-path');

  • New (v6):

    import { useNavigate } from 'react-router-dom';
    const navigate = useNavigate();
    navigate('/some-path');

• Nested Routes: V6 has improved nested routing capabilities.

Summary of the fix for the provided code:

The code you provided already uses useNavigate, Routes, and the element prop, which means it's written for react-router-dom v6. Therefore, the most probable cause of the error is that your node_modules still contain an older version of react-router-dom. Simply running the npm uninstall and npm install commands as described above should resolve it.