Question 375082 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can I use react-router-dom to navigate to another route within my web page?

I’m learning to use React and I’m stuck with a problem. I would appreciate it if you could help me. In a component, I have inserted a link, and I want it so that when clicked, it takes the user to a completely new page (within my own site) to display, but I haven’t been able to achieve it.

Reading and watching videos, I’ve seen that it’s done using "react-router-dom". I’ve managed to make it work partially, but it inserts the component information into my main page, and what I’m looking for is to be able to visit that new route or component on a new page of my site. In other words, I don’t know how to render the linked component. Thanks!

///Component where the link I want to redirect to is located

import React from "react";
import { Link } from "react-router-dom";

function Skills() {
    return(
        <div id = "bioContainer">
            <h2>My Skills</h2>
                <div id = "bioText">
                    <ul className="skills-list">
                        <li className="frontend">HTML</li>
                        <li className="frontend">CSS</li>
                        <li className="frontend">React</li>
                        <li>Javascript</li>
                        <li className="backend">Node.js</li>
                        <li>Github</li>
                        <li className="backend">PostgreSQL</li>
                        <li>Python</li>
                    </ul>
                    <h2>"xxx</h2>
                    <h3>Who am I?</h3>
                    <p className="about">xxx</p>
                    <Link to="/Bio">See more</Link>
                </div>
        </div> 
    );
}

export default Skills;

/// App component

import React from "react";
import Header from "./Header";
import Skills from "./Skills";
import Projects from "./Projects";
import Footer from "./Footer";
import Get_in_touch from "./Get_in_touch";
import Bio from "./Bio";
import {Route, Routes} from "react-router-dom";

function App() {
  return (
      <div className="App">
          <Header />
          <Skills />
          <Routes>
            <Route path="/bio" element={<Bio />} />
          </Routes>
          <Projects />
          <Get_in_touch />
          <Footer />
      </div>
  );
}

export default App;
Tags:

2

Answers


  1. 0

    If you would like for Skills to be rendered on a separate page from Bio then create a separate route for it.

    Example:

    function App() {
  return (
    <div className="App">
      <Header />
      <Routes>
        <Route path="/" element={<Skills />} />
        <Route path="/bio" element={<Bio />} />
      </Routes>
      <Projects />
      <Get_in_touch />
      <Footer />
    </div>
  );
}

    You can do the same for Projects and Get_in_touch as well if you like so they are not also rendered on each "page".

    Login or Signup to reply.
  2. 0

    Your question has already been answered by Drew Reese:

    <Routes>
   <Route path="/skills" element={<Skills />} />
   <Route path="/bio" element={<Bio />} />
</Routes>

    I can’t write comments yet, so I will write this as an answer. If you’re learning React Router I would recommend you to use their documentation. You’re learning the old api.

    https://reactrouter.com/en/main/upgrading/v6-data

    To use your current layout, you need to move everything that isn’t a route (e.g header) into a Layout Component. Then you add the Layout Route as a parent to every other Route.

    <Routes>
   <Route element={<Layout/>}>
       <Route path="/skills" element={<Skills />} />
       <Route path="/bio" element={<Bio />} />
   </Route>
</Routes>

    In the Layout component, you add all the components which should always appear around the content in your route, then you add an Outlet which will render a matching route component (like Skills).

    For example:

    function Layout() {
    return(
      <div className="App">
          <Header />
          <Outlet />
          <Projects />
          <Get_in_touch />
          <Footer />
      </div>

    There is a helper method to convert your Route elements to a RouteObject, as described here https://reactrouter.com/en/main/utils/create-routes-from-elements

    const routes = createBrowserRouter(createRoutesFromElements(
                   // Omit the wrapping <Routes> component
                   <Route element={<Layout/>}>
                       <Route path="/skills" element={<Skills />} />
                       <Route path="/bio" element={<Bio />} />
                   </Route>
               )

    Then you pass the RouteObject to RouterProvider

    <RouterProvider routes={routes}/>

    This is what you would render in your App.tsx, instead of a BrowserRouter component wrapping Routes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search