Question 184634 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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.

Tags:

2

Answers


  1. 0

    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
    Login or Signup to reply.
  2. 0

    You used target="_blank" on page in resume to differentiate your page not in portfolio. Also use target="_blank" in portfolio to display.

    first of all you are import browserRouter in index.js file, this is best thing.
    Example image here

    Then you go to your home page, skip the browser router, just import the link and give a name to the route using to=” ” to the right of the link. Example image here

    Then you move on to the App JS file. Here also there is no need to import the browser router. This time here you import the home.js file using first routes and then route.Example image here
    If you use the browser router index.js once, it will be done and there is no need to use it in any other file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search