What are some examples of routing in React?

What are some examples of routing in React?

In React, routing is typically handled using the React Router library. For example, you can define routes for different components like this:

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/about' component={About} />
        <Route path='/contact' component={Contact} />
      </Switch>
    </Router>
  );
}

Can you explain how the Switch component works?

Sure! The Switch component in React Router renders the first child Route that matches the current location. It ensures that only one route is rendered at a time, which is useful for preventing multiple components from being displayed simultaneously.

What happens if I don't use Switch?

If you don't use Switch, all matching routes will be rendered, which can lead to multiple components being displayed at once. This is usually not the desired behavior, especially for navigation.

Are there any examples of nested routes?

Yes! You can create nested routes by defining routes within a component. For example:

<Route path='/dashboard'>
  <Dashboard />
  <Route path='/dashboard/settings' component={Settings} />
</Route>