Reputation: 11
Keep getting this error:
ERROR in ./src/routes.jsx 20:37-43
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)
@ ./src/index.js 8:0-34 23:33-43
this is my routes.jsx file:
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import App from "./containers/App";
import Login from "./containers/Login";
import Register from "./containers/Register";
import ConfirmAddr from "./components/ConfirmAddr";
import ForgotPassword from "./containers/ForgotPassword";
import ResetPassword from "./containers/ResetPassword";
import UserProfile from "./containers/UserProfile";
import NotFound from "./containers/NotFound";
import Messages from "./components/messages";
import Search from "./containers/Search";
export default function MainRouter() {
return (
<Router>
<div>
<Switch>
<Route exact path="/" component={App} />
<Route path="/users/login" component={Login} />
<Route exact path="/users/register" component={Register} />
<Route path="/users/register/:key" component={ConfirmAddr} />
<Route path="/users/forgot-password" component={ForgotPassword} />
<Route path="/users/reset-password/:key" component={ResetPassword} />
<Route path="/users/profile/:username" component={UserProfile} />
<Route path="/chat/messages" component={Messages} />
<Route path="/main/search" component={Search} />
<Route component={NotFound} />
</Switch>
</div>
</Router>
);
}
and this is my index.js file:
import React from "react";
import "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import { render } from "react-dom";
import MainRouter from "./routes";
import { Provider } from "react-redux";
import configureStore from "./store";
import { getUserData } from "./actions/user-actions";
import AuthService from "./services/AuthService";
const Auth = new AuthService();
const store = configureStore();
if (Auth.loggedIn()) {
store.dispatch(getUserData(Auth.getConfirm().username));
}
render(
<Provider store={store}>
<MainRouter />
</Provider>,
document.getElementById("root")
);
not sure what im doing wrong
Upvotes: 1
Views: 4800
Reputation: 183
React-Router has since released a breaking change (from v5 to v6).
One of the things that got removed was the Switch
component. It should instead be replaced with Routes
(vide the docs on upgrading).
So, for example:
export default function MainRouter() {
return (
<Router>
<div>
<Switch>
<Route exact path="/" component={App} />
<Route path="/users/login" component={Login} />
<Route exact path="/users/register" component={Register} />
<Route path="/users/register/:key" component={ConfirmAddr} />
<Route path="/users/forgot-password" component={ForgotPassword} />
<Route path="/users/reset-password/:key" component={ResetPassword} />
<Route path="/users/profile/:username" component={UserProfile} />
<Route path="/chat/messages" component={Messages} />
<Route path="/main/search" component={Search} />
<Route component={NotFound} />
</Switch>
</div>
</Router>
);
}
Becomes
export default function MainRouter() {
return (
<Router>
<div>
<Routes>
<Route exact path="/" component={App} />
<Route path="/users/login" component={Login} />
<Route exact path="/users/register" component={Register} />
<Route path="/users/register/:key" component={ConfirmAddr} />
<Route path="/users/forgot-password" component={ForgotPassword} />
<Route path="/users/reset-password/:key" component={ResetPassword} />
<Route path="/users/profile/:username" component={UserProfile} />
<Route path="/chat/messages" component={Messages} />
<Route path="/main/search" component={Search} />
<Route component={NotFound} />
</Routes>
</div>
</Router>
);
}
Upvotes: 5