TypeError: Cannot read properties of undefined (reading 'location')

Question

Error occuring in the following code

history.location.pathname is throwing up the error.(line number - 3 and 6)

const LinkList = () => {
  const history = useHistory();
  const isNewPage = history.location.pathname.includes(
    'new'
  );
  const pageIndexParams = history.location.pathname.split(
    '/'
  );
  const page = parseInt(
    pageIndexParams[pageIndexParams.length - 1]
  );

I have tried every solution given but still the error is occuring.

App.js

const App = () => {
  return (
    <div className="center w85">
      <Header />
      <div className="ph3 pv1 background-gray">
        <Routes>
          <Route exact path="/" render={() => <Redirect to="/new/1" />} />
          <Route exact path="/create" element={<CreateLink />} />
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/search" element={<Search />} />
          <Route exact path="/home" element={<LinkList />} />
          <Route
          exact
          path="/new/:page"
          element={<LinkList />}
        />
        </Routes>
      </div>
    </div>
  );
};

Dependencies:

  "react-router": "^5.2.0",
  "react-router-dom": "^6.0.2",

Answer 1

In react-router-dom there is no longer a useHistory hook, it was replaced by a useNavigate hook that returns a navigate function instead of a history object.

To get the current location use the useLocation hook. You should have already been using the location object instead of the history object anyways according to the v5 docs as the history object is mutable.

const LinkList = () => {
  const { pathname } = useLocation();

  const isNewPage = pathname.includes('new');
  const pageIndexParams = pathname.split('/');
  const page = parseInt(
    pageIndexParams[pageIndexParams.length - 1]
  );

  ...

You can also likely remove the react-router dependency since react-router-dom generally re-exports all the react-router components, or at a minimum also bump it to v6 so there's no versioning conflict between them.

Redirect was replaced by the Navigate component in RRDv6, the new syntax for rendering a redirect is as follows:

<Route path="/" element={<Navigate to="/new/1" replace />} />

Also, in RRDv6 all route paths are now always exactly matched, the exact prop is not part of the Route component API.