Problem with react router dom cannot connect link

Question

got error while doing react router dom error is "Cannot read properties of null (reading 'useRef') TypeError: Cannot read properties of null (reading 'useRef')"

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

Answer 1

According to that answer: import error switch is not exported

Switch is replaced by routes Routes. In newer version of react-router-dom. So, you need syntax like that:

import { Switch, Route } from "react-router-dom";

to

import { Routes ,Route } from 'react-router-dom';

And if it is not the case, then you need to check your router package version.

Upgrade all <Switch> elements to <Routes>

• React Router v6 introduces a Routes component that is kind of like Switch, but a lot more powerful. The main advantages of Routes over Switch are:

• All <Route>s and <Link>s inside a <Routes> are relative. This leads to leaner and more predictable code in <Route path> and <Link to>

• Routes are chosen based on the best match, instead of being traversed in order. This avoids bugs due to unreachable routes because they were defined later in your <Switch>

• Routes may be nested in one place instead of being spread out in different components. In small to medium-sized apps, this lets you easily see all your routes at once. In large apps, you can still nest routes in bundles that you load dynamically via React.lazy

• In order to use v6, you'll need to convert all your <Switch> elements to . If you already made the upgrade to v5.1, you're halfway there.

• Here is the official documentation link: upgrade all switch elements to routes