BrowserRouter changing URL and not linking to page

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.

Solution

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
This link will show you how to add a link to another page
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