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
useNavigateis a hook introduced inreact-router-domv6.- If you're getting this error, it means you're likely trying to use
useNavigatewith an older version ofreact-router-dom, most commonly v5 or earlier. In v5, you would useuseHistoryinstead.
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.
Uninstall the current version:
npm uninstall react-router-domInstall the latest version (v6+):
npm install react-router-domThis will install the latest stable version, which is currently v6.x.x.
Install
@types/react-router-dom(if using TypeScript):npm install @types/react-router-domIt's crucial to also update the type definitions to match the
react-router-domversion. In some cases,react-router-domv6 has its own built-in types, making@types/react-router-domunnecessary or even problematic if it's an outdated version. If you still encounter type errors after upgrading, try removing@types/react-router-domand 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>
componentprop is replaced byelementprop: As shown above, instead ofcomponent={Component}, you now useelement={<Component />}.exactprop is no longer needed: In v6, routes are matched exactly by default. You can use the*wildcard for nested routes.useHistoryis replaced byuseNavigate: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.