reactjswebnext.jsurl-routing

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