File package.json

{
  "name": "acc",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "0.27.2",
    "devextreme": "22.1.4",
    "devextreme-react": "^22.1.4",
    "exceljs": "4.3.0",
    "file-saver": "^2.0.5",
    "react": "18.2.0",
    "react-app-polyfill": "3.0.0",
    "react-axios": "^2.0.6",
    "react-dom": "18.2.0",
    "react-router-dom": "6.3.0",
    "react-scripts": "^2.1.3",
    "sass": "^1.34.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build-themes": "devextreme build",
    "postinstall": "npm run build-themes"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "devextreme-cli": "1.3.2",
    "devextreme-themebuilder": "^21.2.4"
  }
}

File Content.js

import React from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';
import appInfo from './app-info';
import routes from './app-routes';
import {SideNavOuterToolbar as SideNavBarLayout} from './layouts';
import {Footer} from './components';

export default function Content() {
    return (
        <SideNavBarLayout title={appInfo.title}>
            <Switch>
                {routes.map(({path, component}) => (
                    <Route
                        exact
                        key={path}
                        path={path}
                        component={component}
                    />
                ))}
                <Redirect to={'/home'}/>
            </Switch>
            <Footer>
                Copyright © 2011-{new Date().getFullYear()} {appInfo.title} Inc.
                <br/>
                All trademarks or registered trademarks are property of their
                respective owners.
            </Footer>
        </SideNavBarLayout>
    );
}

Error

Failed to compile
./src/Content.js
Attempted import error: 'Redirect' is not exported from 'react-router-dom'.

How to fix this error?

CodePudding user response：

Issues

react-router-dom@6 doesn't export any Redirect component, along with also not exporting any Switch component. I'm surprised there's no error for that (perhaps there is and you're only asking about the last error).

Additionally the Route component API/syntax changed significantly; it no longer takes component, or render or children function props and instead now takes a single element prop taking a ReactNode, a.k.a. JSX, as a prop value.

Solution

Replace the Switch component with the Routes component and replace the Redirect component with a route rendering the Navigate component.

Map the routes array to the RRDv6 Route component where component is passed to the element prop.

Here's an example conversion:

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

export default function Content() {
  return (
    <SideNavBarLayout title={appInfo.title}>
      <Routes> // <-- Routes replaces Switch
          {routes.map(({ path, component: Component }) => (
            <Route
              key={path}
              path={path}
              element={<Component />} // <-- component passed as JSX
            />
          ))}
          <Route // <-- RRDv6 Redirect equivalent
            path="*"
            element={<Navigate to="/home" replace />}
          />
        </Route>
      </Routes>
      <Footer>
        Copyright © 2011-{new Date().getFullYear()} {appInfo.title} Inc.
        <br/>
        All trademarks or registered trademarks are property of their respective owners.
      </Footer>
    </SideNavBarLayout>
  );
}

FYI, if you are rendering a SideNavBarLayout "layout" then you might want to invest time in learning about Layout Routes and convert SideNavBarLayout into a layout route by rendering an Outlet instead of the children prop.

CodePudding user response：

Version 6 of React Router doesn't export Redirect so you simply have to use either navigate() or declaratively as <Navigate ... />

Source: https://reactrouter.com/docs/en/v6/upgrading/v5#remove-redirects-inside-switch

Please also see: How to redirect in React Router v6?

CodePudding user response：

You have added router version 6 and your syntax seems like of react router version 5