我如何使用 NavLink 从组件重定向到另一个组件

Question

我想从一个组件转到另一个组件，例如我有一个带有导航链接的导航栏它的代码

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;

所以当我在另一个组件（例如“/login” for ex 时）按下“永远的宠物”NavLink 时，我希望被重定向到该组件

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="name@example.com"/>
                    <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;

Answer 1

指定路径，

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

Answer 2

只需将 to 中的 to 属性设置为与您要重定向的组件匹配的路由。

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

Check NavLink docs