라우트 파라미터와 useParams관련 질문드립니다.
미해결
Slack 클론 코딩[실시간 채팅 with React]
const { workspace } = useParams <{ workspace : string }>(); console . log ( 'workspace param name1 : ' , workspace ); workspace의 값이 계속 undefiend로 출력되고 있습니다. 현재 URL주소는 다음과 같습니다. http://localhost:3090/workspace/sleact/channel/일반 /App/index.tsx 파일에서도 /workspace/:workspace 로 해놓은 상황입니다. import React from 'react' ; import loadable from '@loadable/component' ; import { Switch , Route , Redirect } from 'react-router-dom' ; const LogIn = loadable (() => import ( '@pages/LogIn' )); // 코드 스플리팅 const SignUp = loadable (() => import ( '@pages/SignUp' )); const Workspace = loadable (() => import ( '@layouts/Workspace' )); const App = () => { return ( < Switch > < Redirect exact path = "/" to = "/login" /> < Route path = "/login" component = { LogIn } /> < Route path = "/signup" component = { SignUp } /> < Route path = "/workspace/:workspcae" component = { Workspace } /> </ Switch > ); }; export default App ; 의심가는 부분들은 어느정도 다 봤다고 생각하는데요. params가 undefined된 값을 출력하네요. import { Redirect } from 'react-router' ; import { Link , Switch , Route , useParams } from 'react-router-dom' ; 혹시 import가 문제가 있나 싶어서 useParams를 react-router와 react-router-dom 각각 불러왔는데도 마찬가지입니다.
- react
- route
- Socket.io
- typescript
- useParams
- react
- 웹팩
- babel
- 클론코딩