i want to go from one component to another component like i have a navbar that has navlinks i want to make the navbar name which is "pets forever" when i press on it it redirects me to the home page which is that is its code

import React from 'react';
import { NavLink } from 'react-router-dom';
import"./home.css";

const Home = () => {
return (
<React.Fragment>
    <nav className="navbar navbar-expand-lg ">
         <div className="container-fluid">
            <i className="fas fa-paw fa-2x"></i>
            <a className="navbar-brand " href="" >Pets Forever</a>
            <div className="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul className="navbar-nav mr-auto"> 
                    {/*<li className="nav-item active">
                        <a className="nav-link" href="/home">Home <span className="sr-only"> 
 (current)</span></a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">Shop</a>
                    
                    </li>
                     */}
                    <li className="nav-item" >
                        <NavLink className="nav-link" to="#">About Us</NavLink>
                    
                    </li>
                    <li className="nav-item">
                        <NavLink className="nav-link" to="#">Contact Us</NavLink>

                    </li>
                     
                    <li className="nav-item">
                        <NavLink className="nav-link" to="/login">Login</NavLink>

                    </li>
                    <li className="nav-item">
                        <NavLink className="nav-link" to="#">Sign Up</NavLink>
                    </li>
            
                </ul>
            </div>
        </div>
    </nav>

   <div className="head-div">
            <h1>Hi there!</h1>
            <h1>Do you want buy me a toy?</h1>
            <br/>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, quia?</p>
            <p>Excepturi atque possimus quas qui temporibus ratione</p>  
            <button type="button" className="btn btn-warning">Shop Now</button>
    


        </div> 
</React.Fragment> 

  );
}

export default Home;

so i want to be redirected to this component whenever i press on the "pets forever" NavLink when i'm in another component like "/login" for ex

import React, { Component } from 'react';
import { NavLink,Navigate } from 'react-router-dom';
import "./login.css"

const Login = () => {
return (
    <React.Fragment>
        {/*this is the NavBar */}
        <nav className="navbar navbar-expand-lg ">
            <div className="container-fluid">
            <i className="fas fa-paw fa-2x"></i>
            <NavLink className="navbar-brand " to={<Navigate replace to = "/about"/>} >Pets 
 Forever</NavLink>
                <div className="collapse navbar-collapse justify-content-end" id="navbarNav">
                    <ul className="navbar-nav mr-auto"> 
                        <li className="nav-item">
                            <NavLink className="nav-link" to="#">About Us</NavLink>
                        
                        </li>
                        <li className="nav-item">
                            <NavLink className="nav-link" to="#">Contact Us</NavLink>

                        </li>
                        
                        <li className="nav-item">
                            <NavLink className="nav-link" to="/login">Login</NavLink>

                        </li>
                        <li className="nav-item">
                            <NavLink className="nav-link" to="#">Sign Up</NavLink>
                        </li>
                
                    </ul>
                </div>
            </div>
        </nav>
        {/*this is the form of sign in */}
        <main className="form-signin">
            <form>
                <div className="upper-div">
                    <i className="fas fa-paw fa-2x"></i>
                    <NavLink className="navbar-brand " to="" >Pets Forever</NavLink>
                </div>
                <div className="form-floating">
                    <input type="email" className="form-control" id="floatingInput" 
 placeholder="[email protected]"/>
                    <label htmlFor="floatingInput">Email address</label>
                </div>
                <div className="form-floating">
                    <input type="password" className="form-control" id="floatingPassword" 
 placeholder="Password"/>
                    <label htmlFor="floatingPassword">Password</label>
                </div>

                <div className="checkbox mb-3">
                    <label>
                        <input type="checkbox" value="remember-me"/> Remember me
                    </label>
                </div>
                <button className="w-100 btn btn-lg btn-primary" type="submit">Sign 
 in</button>
                <div className="icon-div">
                    <i className="fab fa-facebook fa-2x"></i>
                    <i className="fab fa-google fa-2x"></i>    
                    <i className="fab fa-twitter fa-2x" ></i>
                    <i className="fab fa-youtube fa-2x"></i>
                </div>
            </form>
        </main>
    </React.Fragment>
  );
}

export default Login;

CodePudding user response：

Specify the path in to,

<nav>
    <NavLink to="/">Home</NavLink>
    <NavLink to="/about">petsforever</NavLink>
</nav>

CodePudding user response：

Just set the to prop from NavLinkto the route that matches the component you want to be redirected.

...
<NavLink className="navbar-brand" to="/desired-route">Pets Forever</NavLink>
...

Check NavLink docs