Error in React while using Router Expected a string or a class/function but got: undefined-CodePudding

I am trying to redirect to another page. I am new to React. I used Router for moving to other page. However i get the following error:

Here is my code:

import Head from 'next/head';
import { Box, Container, Grid, Pagination } from '@mui/material';
import { products } from '../__mocks__/products';
import { ProductListToolbar } from '../components/product/product-list-toolbar';
import { ProductCard } from '../components/product/product-card';
import { DashboardLayout } from '../components/dashboard-layout';
import { CustomerListResults } from '../components/trip/trip-list-results';
import { customers } from '../__mocks__/customers';
import { trips } from '../__mocks__/trips';
import { TripListResults } from '../components/customer/customer-list-results';
import React, { BrowserRouter as Router,
    Switch,
    Route,
    Redirect, useEffect, useState } from "react";

import {
    Avatar,
    Card,
    Checkbox,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TablePagination,
    TableRow,
    Typography,
    Button
} from '@mui/material';
import NextLink from 'next/link';

const TripRequests = () => {

    const [acceptState, setAcceptState] = useState(true);
    const accept = () => setAcceptState(false);

    return (
        <>
        <Router>
        <Switch>
        <Route exact path="/" component={DashboardLayout } />
            <Head>
                <title>
                    Trip Requests
                </title>
            </Head>
            <Box
                component="main"
                sx={{
                    flexGrow: 1,
                    py: 8
                }}
            >
                <Container maxWidth={false}>
                    <Box sx={{ mt: 3 }}>
                        {/* <CustomerListResults customers={trips} /> */}
                        <h2>Trip Requests (1)</h2>
                    </Box>
                    <Box sx={{ minWidth: 1050, mt: 3 }}>
                        <Table>
                            <TableHead>
                                <TableRow>
                                    <TableCell padding="checkbox">
                                        {/* <Checkbox
                    // checked={selectedCustomerIds.length === customers.length}
                    color="primary"
                    // indeterminate={
                    //   selectedCustomerIds.length > 0
                    //   && selectedCustomerIds.length < customers.length
                    // }
                    // onChange={handleSelectAll}
                  /> */}
                                    </TableCell>
                                    {/* <TableCell>
                  Trip Id
                </TableCell> */}
                                    <TableCell>
                                        Customer
                                    </TableCell>
                                    <TableCell>
                                        Departure
                                    </TableCell>
                                    <TableCell>
                                        Destination
                                    </TableCell>
                                    <TableCell>
                                        Truck / Driver
                                    </TableCell>
                                    <TableCell>
                                        Action
                                    </TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>

                                <TableRow

                                    hover
                                //   key={customer.id}
                                //   selected={selectedCustomerIds.indexOf(customer.id) !== -1}
                                >
                                    <TableCell padding="checkbox">
                                        {/* <Checkbox
                      checked={selectedCustomerIds.indexOf(customer.id) !== -1}
                      onChange={(event) => handleSelectOne(event, customer.id)}
                      value="true"
                    /> */}
                                    </TableCell>
                                    <TableCell>
                                        Rohan Joshi
                                    </TableCell>
                                    <TableCell>
                                        <Box
                                            sx={{
                                                alignItems: 'center',
                                                display: 'flex'
                                            }}
                                        >
                                            {/* <Avatar
                        src={customer.avatarUrl}
                        sx={{ mr: 2 }}
                      >
                        {getInitials(customer.name)}
                      </Avatar> */}
                                            <Typography
                                                color="textPrimary"
                                                variant="body1"
                                            >
                                                A-50, Sec 67, Noida
                                            </Typography>
                                        </Box>
                                    </TableCell>

                                    <TableCell>
                                        HUDA City Center
                                    </TableCell>

                                    <TableCell>
                                        Truck #123 / Ravi Shukla
                                    </TableCell>
                                    <TableCell>
                                        {acceptState ? (
                                            <><Button onClick={accept}>Accept</Button><Button>Decline</Button></>
                                        ) : <p>Pending Payment</p>}

                                    </TableCell>

                                    {/* <TableCell>
                    {format(customer.createdAt, 'dd/MM/yyyy')}
                  </TableCell> */}
                                </TableRow>

                            </TableBody>
                        </Table>
                    </Box>

                </Container>
            </Box>
            {/* <Redirect to="/" /> */}

            </Switch>
        </Router>
        </>
      
    );
};

TripRequests.getLayout = (page) => (
    <DashboardLayout>
        {page}
    </DashboardLayout>
);

export default TripRequests;

CodePudding user response：

Import Router objects from react-router-dom instead of react

import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";

CodePudding user response：

In the latest react-router-dom, the route should be configured like below. Initially you need to import all the dependencies from react-router-dom. Also, all the routes should be wrapped inside <Routes></Routes>.

import './App.css';
import Home from './Components/Home'
import Functioncontext from './Components/Functioncontext'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/context" element={<Functioncontext />} />
        </Routes>
      </Router>


    </div>
  );
}

export default App;

The above code works on "react-router-dom": "^6.3.0". Before react-router-dom version 6. It has to be configured in the different way.