next.js BrowserRouter更改URL并且不链接到页面

我是js和React的新手，一直在尝试创建一个个人网站。我已经挣扎了几个小时，只是试图创建一个单独的页面，我可以把我的项目和链接到它从我的主页。简历链接工作，但只有因为即时通讯直接链接到一个pdf。
这就是我的page.js看起来的样子：

'use client'
import Head from 'next/head';
import {BsFillMoonStarsFill} from 'react-icons/bs';
import {AiFillLinkedin, AiFillGithub} from "react-icons/ai";
import { BrowserRouter, Link } from 'react-router-dom';
import { createContext } from 'react'

const Context = createContext()

export default function Home() {
  return (

    <div>
      <Head>
        <title>First Last Portfolio</title>
        <meta name = "description" content = "Text"></meta>
        <link rel = "icon" href = "/faviocon.ico" />
      </Head>
      <main className='bg-teal-400 px-10 md:px-20 lg:px-30'>
        <section className=" bg-teal-400 min-h-screen">
          <nav className='py-10 mb-12 flex justify-between'>
            <h1 className='text-xl font-mono'>Name</h1>
            <ul className='flex items-center'>
              <li>
                <BsFillMoonStarsFill className='cursor-pointer text-2xl'/>
              </li>
              <li>
              <BrowserRouter>
              <Link className='bg-teal-950 text-gray-200 px-4 py-2 rounded-md ml-6' target="_blank" rel="noopener noreferrer"  to="/resume.pdf">
                  Resume
              </Link>
              
              <Link className='bg-teal-950 text-gray-200 px-4 py-2 rounded-md ml-6' to="/projects">
                  Portfolio
              </Link>
              </BrowserRouter>
              </li>
            </ul>
          </nav>
          <div className='text-center p-10'>
            <h2 className='text-5xl py-2 text-teal-950 font-medium md:text-6xl'>First Last</h2>
            <h3 className='text-2xl py-2 md:text-3xl'>Software Engineer</h3>
            <p className='text-md py-5 leading-8 text-gray-800 md:text-xl max-w-lg mx-auto'>blah blah blas this is what I do</p>
          </div>
          <div className='text-5xl flex justify-center gap-16 py-3 text-teal-950'>
            <AiFillLinkedin />
            <AiFillGithub />
          </div>
        </section>
        <section>
    <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
        <div style={{flex: 1, height: '1px', backgroundColor: 'black'}}/>

            <div>
              <h3 className='text-lg font-medium' style={{width: '100px', textAlign: 'center'}}>Portfolio</h3>
            </div>

        <div style={{flex: 1, height: '1px', backgroundColor: 'black'}}/>
    </div>

          <div className='text-center shadow-lg p-10'>
            <h3 className='text-lg font-medium'>Project 1</h3>
            <p>
              Some information about the project should probably be here
            </p>
          </div>
        </section>
      </main>
    </div>

  );
}

这就是我的index.js的样子：

import ReactDOM from "react-dom";
import {BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';

import Layout from "./layout";
import Home from "./page";
import Resume from "./resume";
import Projects from "./projects";
//import { BrowserRouter } from "react-router-dom";

export default function App() {
    
  return (

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="/resume" element={<Resume />} />
          <Route path="/projects" element={<Projects />} />   
          </Route>               
      </Routes>
    </BrowserRouter>

  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

这是我的项目。js：

import React from "react";

const Projects = () => {
  
  const projects = [
    { id: 1, title: "Project 1", description: "Description of Project 1" },
    { id: 2, title: "Project 2", description: "Description of Project 2" },
  ];

  return (
    <div>
      <h1>Projects</h1>
      <ul>
        {projects.map((project) => (
          <li key={project.id}>
            <h2>{project.title}</h2>
            <p>{project.description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Projects;

我最初得到“不能使用路由器外的链接”，这是固定的现在，但我的im没有得到路由到我的页面。

你学习react和JavaScript很好。
这里有几件事

React是一个拥有许多不同框架和工具的大型社区。他们不是一起工作的
Next.js是一种混合服务器端渲染和react.js的工具。它与许多专注于纯客户端内容的工具不兼容
您安装了'react-router-dom'，它不能与next.js一起工作，因为它是客户端关注的
This next.js page will show you how to do routing within their framework。您可以使用此选项创建新页面，并查看新页面如何连接到路由
This link will show you how to add a link to another page
我建议删除“react-router-dom”包，完全专注于next.js工具。
许多组件库都可以工作，但是对于next.js，路由肯定需要用next.js的方式来完成

next.js BrowserRouter更改URL并且不链接到页面

1条答案

相关问题

热门标签

最新问答