英文:
BrowserRouter changing URL and not linking to page
问题
我是你的中文翻译，以下是代码的翻译部分：
在你的页面中，你引入了React的一些组件和库，以及一些路由相关的内容。你的主页 Home 组件看起来像这样：
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 blah，这是我做的事情。</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>这里应该有关于项目的一些信息。</p>
</div>
</section>
</main>
</div>
);
}
你的主页看起来已经设置了路由，但如果你的路由仍然无法正常工作，可能需要检查以下几点：
-
确保你的路由库正确导入和使用。在你的
App组件中，你已经使用了react-router-dom的BrowserRouter和Routes组件，这是正确的。 -
确保你的路由路径与链接路径匹配。在你的主页组件中，你使用了以下链接：
/resume.pdf：这个链接应该指向你的简历 PDF 文件。/projects：这个链接应该指向你的项目页面。
-
检查路由是否正确嵌套。在你的
App组件中，你已经设置了/路由，并在其中包含了子路由/resume和/projects。这看起来是正确的。
如果你仍然遇到问题，可能需要检查你的路由配置和组件是否正确导入。如果问题仍然存在，请提供更多关于错误消息和问题的详细信息，以便我可以提供更具体的帮助。
英文:
Im new to js and React and have been trying to create a personal website. I have been struggling for hours simply trying to create a separate page where I can put my projects and link to it from my main page. The resume link works but only beacuse im directly linking to a pdf.
This is how my page.js looks:
'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>
);
}
This is how my index.js looks:
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 />);
and this is my projects.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;
I was initially getting "Cannot use link outside router", which is fixed now but my im not getting routed to my pages.
答案1
得分: 1
恭喜你学习了React和JavaScript。
以下是翻译好的部分：
- React是一个庞大的社区，拥有许多不同的框架和工具。它们并不都兼容。
- Next.js是一种将服务器端渲染和React.js混合使用的工具。它与许多专注于纯客户端内容的工具不兼容。
- 你安装了'react-router-dom'，但它与Next.js不兼容，因为它侧重于客户端。
- 这个Next.js页面将向你展示如何在他们的框架内进行路由。你可以使用这个来创建新页面，并了解新页面如何与路由连接。
- 这个链接将向你展示如何添加到另一个页面的链接。
- 我建议删除"react-router-dom"包，并完全专注于使用Next.js工具。许多组件库可以使用，但对于Next.js，路由确实需要按Next.js的方式进行处理。
英文:
Good on you for learning react and javascript.
A couple things here
-
React is a big community with lots of different frameworks and tools. They don't all work together
-
Next.js is a type of tool that mixes server side rendering and react.js. It is incompatible with many tools that focus on pure client side stuff
-
You installed 'react-router-dom', which won't work with next.js because it is client side focused
-
This next.js page will show you how to do routing within their framework. You can use this to create new pages and see how that new page connects to the route
-
I would recommend removing the "react-router-dom" package and focusing completely on next.js tools.
-
Many component libraries will work, but for next.js, routing definitely needs to be done the next.js way
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论