Attempted import error: ‘Switch‘ is not exported from ‘react-router-dom‘

Switch¶

1. In versions above V6.0, Routers has replaced Switch
2. Under normal circumstances, path and component have a one-to-one correspondence
3. Switch can improve routing matching efficiency (single matching)

Basic use of routing¶

1. Clarify the navigation area and display area in the interface
2. The a tag in the navigation area is changed to the Link tag

<Link to='/xxxxx'>Demo</Link>//No highlight state switch
<NavLink to='/xxxxx'/>About</NavLink>//The middle tag element can be replaced by children in <NavLink>
<NavLink to='/xxxxx'/ children='About'>//The highlight state will be switched, and the default increase will add active after className

3. Write the Route tag in the display area to match the path (the new version needs to be wrapped with Routes and the imported components need to use element, otherwise empty content will be displayed)

<Route path='/xxxx' component={Demo}/>//Old version V5
<Routes>
   <Route path='/xxxx' element={Demo}/>//New version V6
</Routes>

The outermost part of the App is wrapped with a BrowserRouter or HashRouter