Property 'abc' does not exist on type '{}' useparams-CodePudding

I'm trying to get an id from the useParams, but getting Property employeeId does not exist on type error and I don't understand why.

Here is the routes.tsx

//I omitted all the imports here
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';

const DefaultContainer = (): JSX.Element => (
  <div>
    <div id="header">
      <Header />
    </div>
    <div>
      <div id="main-container">
        <Outlet />
      </div>
    </div>
  </div>
);

const AllRoutes = () => (
  <Router>
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/" element={<DefaultContainer />}>
        <PrivateRoute path="/" element={<Home />} />
        <PrivateRoute path="/e/employees" element={<EmployeeList />} />
        <PrivateRoute path="/e/add" element={<AddEmployee />} />
        <PrivateRoute path="/e/:employeeId" element={<Employee />} />
        <PrivateRoute path="/e/update/:employeeId" element={<UpdateEmployee />} />
       </Route>
    </Routes>
  </Router>
);

export default AllRoutes;

Here is my UpdateEmployee.component.tsx

import React from 'react';
import { useParams } from 'react-router';

const UpdateEmployee = () => {
  const { employeeId } = useParams();
  console.log(employeeId);

  return <h1>hello world</h1>
}

In the routes.tsx there is /e/:employeeId it is working fine.

I also tried adding type for employeeId as string, but still no luck.

Really appreciate your help.

PrivateRoutes.component.tsx

import React from 'react';
import { Navigate, Route } from 'react-router-dom';
import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks';
import { setUser } from '../../services/reducers/Auth.reducer';

const PrivateRoute = ({ element, ...rest }) => {
  const dispatch = useAppDispatch();
  const localStorageData = localStorage.getItem('user');
  const user = localStorageData ? JSON.parse(localStorageData) : null;

  if (!user) {
    return <Navigate to="/login" />;
  }
  // This will reload the user from localstorage in redux state.
  const stateUser = useAppSelector((state) => state.auth.user);
  if (!stateUser) {
    dispatch(setUser(user));
  }

  return <Route element={element} {...rest} />;
};

export default PrivateRoute;

CodePudding user response：

Try with setting to any type, this worked for me.

const { employeeId } : any = useParams();