Routing and Navigation in React.js 🚀

npm install react-router-dom

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

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

<Route path="/user/:id" component={UserProfile} />

function UserProfile({ match }) {
  return <div>User ID: {match.params.id}</div>;
}

function Dashboard() {
  return (
    <Switch>
      <Route path="/dashboard/profile" component={Profile} />
      <Route path="/dashboard/settings" component={Settings} />
    </Switch>
  );
}

jsx
import { Redirect } from 'react-router-dom';

<Route path="/old-path">
  <Redirect to="/new-path" />
</Route>
<Route path="*">
  <NotFound />
</Route>
`
#COdeWith
#KOToka