在React项目中使用React Router v6创建跳转链接的问题咨询

• Route属性使用错误：React Router v6 中<Route>组件匹配路径用path属性而非to，你的代码里所有Route都写了to属性，无法正确匹配路径。同时element属性需要传入JSX实例（比如<Navbar />），直接传组件引用Navbar不会渲染对应内容。
• 同路径多Route匹配规则问题：<Routes>组件默认只会渲染第一个匹配到的<Route>，你给多个Route设置了相同的/路径，除了第一个Navbar之外，剩下的Header、Featured、About、Projects组件都不会被渲染，自然触发不了Projects里的跳转逻辑。
• Link组件使用场景错误：React Router的<Link>仅用于站内路由跳转，你直接传入外部域名会被识别为站内相对路径，跳转后会拼接在当前站点域名后，无法打开目标地址。如果要跳转外部站点，需要用原生<a>标签。

1. 修正Home组件的路由结构 #

如果你当前这些组件都是首页的固定内容，不需要按路由拆分渲染，直接移除多余的<Routes>和<Route>包裹即可，仅保留<Router>作为路由上下文容器，修改后代码如下：

import React from 'react';
import './Home.css';
import Navbar from '../Navbar/Navbar';
import Header from '../Header/Header';
import Featured from '../Featured/Featured';
import useLocoScroll from '../Hooks/LocomotiveScroll';
import About from "../About/About";
import Projects from "../Mywork/Projects"
import { BrowserRouter as Router } from 'react-router-dom';

const Home = () => {
    useLocoScroll();
    return (
        <div className="main-container" id="main-container" data-scroll-container >
            <Router>
                <Navbar />
                <Header />
                <Featured />
                <About />
                <Projects />
                {/* 后续需要新增其他路由页面时，再在此处添加<Routes>和对应<Route>配置即可 */}
            </Router>
        </div>
    )
}

export default Home;

2. 修正SingleProject的跳转逻辑 #

根据跳转场景选择正确的标签：

• 跳站内路由（比如你自己的项目详情页）：使用<Link>，路径开头加/声明为根路径，避免相对路径拼接错误，示例：

<Link to={`/projects/${你的项目id}`}>
  <GitHub/>
</Link>

• 跳外部站点：使用原生<a>标签，添加target="_blank" rel="noopener noreferrer"属性保证安全，示例：

import React,{useState} from 'react';
import './Projects.css';
import {Visibility, GitHub } from "@material-ui/icons";

const SingleProject = ({src, title, githubUrl, demoUrl}) => {
    const [hover, SetHover] = useState(false);
    const showIcons = hover ? "Show" : "";

    return (
        <div className="card-container" onMouseEnter={()=> SetHover(true)} onMouseLeave={()=> SetHover(false)}>
            <img src={src} alt={title}/>
            <h1 id="card-title">{title}</h1>
           <div className={`Info ${showIcons}`}>
                <div className="Icon">
                    <a href={githubUrl} target="_blank" rel="noopener noreferrer">
                        <GitHub/>
                    </a>
                </div>
                <div className="Icon">
                    <a href={demoUrl} target="_blank" rel="noopener noreferrer">
                        <Visibility/>
                    </a>
                </div>
            </div>
        </div>
    )
}

调整后即可正常实现跳转效果。

内容的提问来源于stack exchange，提问作者TheRealJohnDoe