Routing

Effective navigation is crucial for creating dynamic single-page applications. "Startup" offers a routing system that allows you to manage navigation seamlessly.

Setting Up Routing

Installation: Ensure you have the required packages installed. If not, you can install them using npm or yarn.
bashCopy codenpm install react-router-dom
Basic Router: Create a basic router in your application to handle different routes.

1// App.js
2import React from 'react';
3import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
4import Home from './Home';
5import About from './About';
6import Contact from './Contact';
7
8function App() {
9  return (
10    <Router>
11      <Switch>
12        <Route path="/" exact component={Home} />
13        <Route path="/about" component={About} />
14        <Route path="/contact" component={Contact} />
15      </Switch>
16    </Router>
17  );
18}
19
20export default App;

Navigation Links: Create navigation links using the Link component from "react-router-dom."

1// Navigation.js
2import React from 'react';
3import { Link } from 'react-router-dom';
4
5function Navigation() {
6  return (
7    <nav>
8      <ul>
9        <li>
10          <Link to="/">Home</Link>
11        </li>
12        <li>
13          <Link to="/about">About</Link>
14        </li>
15        <li>
16          <Link to="/contact">Contact</Link>
17        </li>
18      </ul>
19    </nav>
20  );
21}
22
23export default Navigation;
24

Handling Route Parameters

You can also handle route parameters to create dynamic routes. For example:

1// ProductDetail.js
2import React from 'react';
3import { useParams } from 'react-router-dom';
4
5function ProductDetail() {
6  const { productId } = useParams();
7
8  return (
9    <div>
10      <h2>Product Detail</h2>
11      <p>Product ID: {productId}</p>
12    </div>
13  );
14}
15
16export default ProductDetail;

Redirects and 404 Pages

You can handle redirects and create a custom 404 page using the Redirect and Switch components:

1// App.js
2import React from 'react';
3import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
4import Home from './Home';
5import About from './About';
6import Contact from './Contact';
7import NotFound from './NotFound';
8
9function App() {
10  return (
11    <Router>
12      <Switch>
13        <Route path="/" exact component={Home} />
14        <Route path="/about" component={About} />
15        <Route path="/contact" component={Contact} />
16        <Route path="/products/:productId" component={ProductDetail} />
17        <Redirect from="/info" to="/about" />
18        <Route path="/404" component={NotFound} />
19        <Redirect to="/404" />
20      </Switch>
21    </Router>
22  );
23}
24
25export default App;

Conclusion

With the routing and navigation capabilities of "Startup" along with the "react-router-dom" library, you can create complex navigation structures, handle route parameters, and create redirects and custom 404 pages with ease, making your web application highly dynamic and user-friendly.