In React, routing is typically handled using third-party libraries like React Router. React Router is a popular routing library for React that enables you to create dynamic, single-page applications with multiple views or pages. Here's a basic example of how you can set up routing in a React application using React Router:
- First, you need to install React Router in your project. You can do this via npm or yarn:
npm install react-router-dom
or
yarn add react-router-dom
- Once React Router is installed, you can set up routing in your application. Here's an example of how you might structure your
App.jsfile:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import NotFound from './components/NotFound';
function App() {
return (
<Router>
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={NotFound} />
</Switch>
</div>
</Router>
);
}
export default App;
- Create the components for your different pages. For example, you might have a
Home.js,About.js,Contact.js, andNotFound.jsfile in a components directory:
// Home.js
import React from 'react';
function Home() {
return (
<div>
<h2>Home</h2>
<p>Welcome to our website!</p>
</div>
);
}
export default Home;
// About.js
import React from 'react';
function About() {
return (
<div>
<h2>About Us</h2>
<p>Learn more about our company.</p>
</div>
);
}
export default About;
// Contact.js
import React from 'react';
function Contact() {
return (
<div>
<h2>Contact Us</h2>
<p>Get in touch with us.</p>
</div>
);
}
export default Contact;
// NotFound.js
import React from 'react';
function NotFound() {
return (
<div>
<h2>404 Not Found</h2>
<p>Oops! Page not found.</p>
</div>
);
}
export default NotFound;
- Finally, you can start your application and navigate between different routes. Each time you navigate to a different route, the corresponding component will be rendered. This is a basic example of how you can implement routing in a React application using React Router. React Router offers many more features and options for configuring your routes, such as nested routes, route parameters, and more. Be sure to check out the React Router documentation for more information and advanced usage.
Array methods in react.js
Fragment in react.js
Conditional rendering in react.js
Children component in react.js
use of Async/Await in react.js
Array methods in react.js
JSX in react.js
Event Handling in react.js
Arrow function in react.js
Virtual DOM in react.js
React map() in react.js
How to create dark mode in react.js
How to use of Props in react.js
Class component and Functional component
How to use of Router in react.js
All React hooks explain
CSS box model
How to make portfolio nav-bar in react.js
Top comments (0)