My React router application fail to run with errors

Question

I am currently learning React and I have been facing diffulties on how to solve the problem I have been facing when I try to run my react router app. The error I get; Compiled with problems:

ERROR in ./src/components/App.js 65:37-43
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports:...

And I also have the following files and codes in my src/components folder;

1. index.html (react-router-app/public)

2. ExpenseEntryItemList.js (react-router-app/src/components)

3. ExpenseEntryForm.js (react-router-app/src/components)

4. App.css (react-router-app/src/components)

5. index.js (react-router-app/src)

6. App.js (react-router-app/src/components)

    import React from 'react'; 
    import Home from './Home' 
    import ExpenseEntryItemList from './ExpenseEntryItemList' 
    import ExpenseEntryItemForm from './ExpenseEntryItemForm' 
    import './App.css'
    import {BrowserRouter as Router, Link, Switch, Route} from 'react-router-dom'
   
    function App() { 
        return ( 
            <Router> 
                <div> 
                    <nav> 
                        <ul> 
                            <li> <Link to="/">Home</Link> </li> 
                            <li> <Link to="/list">List Expenses</Link> </li> 
                            <li> <Link to="/add">Add Expense</Link> </li> 
                        </ul> 
                    </nav> 
                    <Switch> 
                        <Route path="/list"> 
                            <ExpenseEntryItemList /> 
                        </Route> 
                        <Route path="/add"> 
                            <ExpenseEntryItemForm /> 
                        </Route> 
                        <Route path="/"> 
                            <Home /> 
                        </Route> 
                    </Switch> 
                </div>
            </Router> 
        ); 
    } export default App;
   

The problem is from my App.js file which I have been unable to solve.

I have tried reinstalling router and check if it has been successfully installed but I am still unable to fix the problem.

Answer 1

What version of react-router-dom are you using now?

The Switch component was replaced by Routes component in v6.

See react router doc for more information.