How can I put the Routh path directly in the html of my Home and redirect to the other components-CodePudding

Thats my Home.js

function Home() {

return (
    <div>
        <section className="sec1">
    <nav className="nav">
        <ul className="ulli">
            <li><i ></i></li>
            <li>Home</li>
            <li>Recipes</li>
            <li>Favourites</li>
            <li>Personal List</li>
            <li>Create Recipe</li> 
        </ul>
        <div className="btn1">
            <button className="btns">Sign Up</button>
            <button className="btnl">Log in</button>
        </div>
    </nav>
</section>
<h1 className="welcome">Welcome to UclIncop Recipes</h1>
<hr/>
  <article className="roword">
        <article className = "articlea">
            <img className="imgi"  src="https://www.wellplated.com/wp-content/uploads/2021/05/Healthy-Air-Fryer-Salmon.jpg"/>
            <button className="sec2btn">Details</button>
        </article>
        <article class = "articlea">
            <img className="imgi" src="https://img.buzzfeed.com/buzzfeed-static/static/2019-01/14/15/asset/buzzfeed-prod-web-01/sub-buzz-6945-1547499531-1.jpg?downsize=900:*&amp;output-format=auto&amp;output-quality=auto"/>
            <button className="sec2btn">Details</button>
        </article>
        <article class = "articlea">
            <img className="imgi" src="https://i.pinimg.com/originals/39/51/7b/39517bf5ee252193fbd7bc4d1d2e89b6.jpg"/>
            <button className="sec2btn">Details</button>
        </article>
    </article>
    <p className="textp">
    Looking for inspiration on how to spice up salmon dinners? From a sweet-spicy marinade for whole grilled salmon to fiery wasabi mayo salmon fillets, and spicy smoked salmon sushi recipes, we have compiled this 
    versatile collection of showstopping salmon dishes that will satisfy the most ardent spice lovers!
    Salmon is marinated in a spicy Asian-inspired marinade, then cooked on a hot grill.Use cooked marinade as a dipping sauce or drizzle over salmon just before serving.
        </p>
        <article >
            <article className = "articles">
                <img className = "img2"src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYne5Tv-GWHCreN0XonIv5vLfFdEOxRdThsg&amp;usqp=CAU"/>
                <h1>Recipe</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                    maxime...</p>
                <button className="btnd2">Details</button>
            </article>
            <article  className = "articles">
                <img className = "img2" src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https://static.onecms.io/wp-content/uploads/sites/34/2011/01/18232122/cashew-chicken-kebabs-102899720.jpg"/>
                <h1>Recipe</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                    maxime...</p>
                <button className="btnd2">Details</button>
            </article>
            <article  className = "articles">
                <img className = "img2" src="https://images.themodernproper.com/billowy-turkey/production/posts/2019/Best-Kid-Friendly-Recipes-1.jpg?w=1200&amp;auto=compress,format&amp;fit=crop&amp;dm=1604880029&amp;s=62ecbc82edfd3a4b2b2864c7f147c3ed"/>
                <h1>Recipe</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                    maxime...</p>
                <button className="btnd2">Details</button>
            </article>
        </article>
        <footer className="footer">
        <p>© All Rights Reserved to UclIncop</p>
    </footer>
        </div>
    );
}

export default Home;

I want the link Recipes to show my Recipe List component and so on That's my RecipeList.js

function Recipe List() {

    return (
        <div>
           <section className="sec4">
       <article className="artsec4">
        <article>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYne5Tv-GWHCreN0XonIv5vLfFdEOxRdThsg&amp;usqp=CAU"/>
            <h1>Recipe</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                maxime...</p>
                <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
            <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https://static.onecms.io/wp-content/uploads/sites/34/2011/01/18232122/cashew-chicken-kebabs-102899720.jpg"/>
            <h1>Recipe</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                maxime...</p>
            <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
                <img src="https://www.gimmesomeoven.com/wp-content/uploads/2022/06/Roasted-Chickpea-Salad-Recipe-4-320x480.jpg"/>
                <h1>Recipe</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                    maxime...</p>
                    <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYne5Tv-GWHCreN0XonIv5vLfFdEOxRdThsg&amp;usqp=CAU"/>
            <h1>Recipe</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                maxime...</p>
                <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
            <img src="https://cdn.loveandlemons.com/wp-content/uploads/2022/04/baked-eggs-recipe.jpg"/>
            <h1>Recipe</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                maxime...</p>
                <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
            <img src="https://images.themodernproper.com/billowy-turkey/production/posts/2019/Best-Kid-Friendly-Recipes-1.jpg?w=1200&amp;auto=compress,format&amp;fit=crop&amp;dm=1604880029&amp;s=62ecbc82edfd3a4b2b2864c7f147c3ed"/>
            <h1>Recipe</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                maxime...</p>
                <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
            <img src="https://www.gimmesomeoven.com/wp-content/uploads/2017/07/How-To-Make-Fried-Rice-Recipe-2-1.jpg"/>
            <h1>Recipe</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                maxime...</p>
                <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
            <img src="https://minimalistbaker.com/wp-content/uploads/2015/08/AMAZING-30-minute-HEALTHY-Chickpea-Shawarma-Wraps-with-a-simple-Garlic-Dill-Sauce-An-easy-weeknight-vegan-plantbased-meal-healthy-recipe-mediterranean-minimalistbaker.jpg"/>
            <h1>Recipe</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                maxime...</p>
                <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
                <img src="https://joyfoodsunshine.com/wp-content/uploads/2022/06/chicken-kebabs-recipe-1-360x480.jpg"/>
                <h1>Recipe</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                    maxime...</p>
                    <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRqV4YfDJN4QYLy_8FfoQRoM3uOukP0uEKvibe6rY4tSSuBus7pjshUmMiJFbxaWZH8wi8&amp;usqp=CAU"/>
            <h1>Recipe</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                maxime...</p>
                <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
            <img src="https://therecipecritic.com/wp-content/uploads/2019/06/strawberrybruschetta3-368x463.jpg"/>
            <h1>Recipe</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                maxime...</p>
                <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
            <img src="https://www.simplyrecipes.com/thmb/De8yp7CBzVdq7N32Zbb7bKDXtv4=/440x0/filters:no_upscale():max_bytes(150000):strip_icc()/Simply-Recipes-Tandoori-Chicken-LEAD-01-7767f2892b824b24b65213f3ba28ff8c.jpg"/>
            <h1>Recipe</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                maxime...</p>
                <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
            <img src="https://www.acouplecooks.com/wp-content/uploads/2020/08/Sauce-for-Scallops-001.jpg"/>
            <h1>Recipe</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                maxime...</p>
                <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCnRhPVRY7R2721S6faEhMTGjxfNZY5N5zBw&amp;usqp=CAU"/>
            <h1>Recipe</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                maxime...</p>
                <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
        <article>
                <img src="https://i.pinimg.com/564x/38/d3/05/38d3056668dc3eb6b1184c57f8914a85.jpg"/>
                <h1>Recipe</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea magni sunt velit 
                    maxime...</p>
                    <button className="btnd">Details</button>
            <button className="favour"><i ></i></button>
        </article>
       </article>
    </section>
        </div>
    );
}

export default RecipeList;

CodePudding user response：

If all you want is to have the Home component render a link to a "/recipes" path that is rendering the RecipeList component then can use react-router-dom to render the app into a router component, the App component to render the routes, and the Home component render a Link in the unordered list.

Example:

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <Router>
      <App />
    </Router>
  </StrictMode>
);

App

import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/recipes" element={<RecipeList />} />
      </Routes>
    </div>
  );
}

Home

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

...

<nav className="nav">
  <ul className="ulli">
    <li>
      <i ></i>
    </li>
    <li>Home</li>
    <li>
      <Link to="/recipes">Recipes</Link> // <-- render a Link
    </li>
    <li>Favourites</li>
    <li>Personal List</li>
    <li>Create Recipe</li>
  </ul>
  <div className="btn1">
    <button className="btns">Sign Up</button>
    <button className="btnl">Log in</button>
  </div>
</nav>

You might want to move the nav element out into its own component and render this outside a route so it's always available instead of only being rendered when the Home component is rendered.