我是js和reaction的新手，一直在try 创建一个个人网站.我已经挣扎了几个小时，只是想创建一个单独的页面，在那里我可以把我的项目放在那里，并从我的主页链接到它.简历链接有效，但仅因为IM直接链接到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没有被路由到我的页面.