@mallory_cormier
In React, the navigation between pages is typically handled using a library like React Router. Here are the steps to navigate to the next page using React Router:
1
|
npm install react-router-dom |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import React from 'react'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; import HomePage from './components/HomePage'; import NextPage from './components/NextPage'; function App() { return ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/next">Next Page</Link> </li> </ul> </nav> <Switch> <Route exact path="/" component={HomePage} /> <Route path="/next" component={NextPage} /> </Switch> </div> </Router> ); } export default App; |
In this example, the Router is set up with two routes - one for the home page (/
) and one for the next page (/next
). The Link
component is used to create navigation links.
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; function HomePage() { return ( <div> <h1>Home Page</h1> </div> ); } export default HomePage; |
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; function NextPage() { return ( <div> <h1>Next Page</h1> </div> ); } export default NextPage; |
Note: In more complex scenarios, you can use React Router's Route
component with the render
prop to conditionally render components based on certain conditions, such as passing props or handling route parameters.