React Router render component on a separate page

  javascript, react-router, reactjs

I started my first React Project and want to build my Design Portfolio by myself. So it’s also my first time working with React Router or try to combine Components with each other by clicking a button.

I want to render all standard components in App.js and want to link only my project with the description project pages with a button. So if the user clicked on the button they will linked to the description of this project.
But surprise it doesn’t work. My problem now is that the description page rendered in the same page as the standard component like "About, Navbar, Contact" rendered. But i want that the description page from the projects rendered in a seperate page. What can i do that this work?

I guess this is my relevant code to understand what i’ve made so far. But if you need more snippets please say it. 🙂

App.js
import React, { useState, useRef } from 'react';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Contact from './components/Contact';
import Hero from './components/Hero';
import About from './components/About';
import Cards from './components/Cards';
import Sidebar from './components/Sidebar';
import Projects from './components/Projects';
import ProjectPath from './components/ProjectPath';

import Smartdress from './pages/Smartdress';
import Nazzle from './pages/Nazzle';
import Storyline from './pages/Storyline';
import Hel from './pages/Hel';
import Songstories from './pages/Songstories';

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Hero />
        <Projects />
        <Switch>
          <Route exact path='/project/smartdress' component={Smartdress} />
          <Route exact path='/project/nazzle' component={Nazzle} />
          <Route exact path='/project/storyline' component={Storyline} />
          <Route exact path='/project/hygienelab' component={Hel} />
          <Route exact path='/project/songstories' component={Songstories} />
        </Switch>
        <About />
        <Contact />
        <Sidebar />
        <Footer />
      </Router>
    </>
  );
}

export default App;

Note: /pages/Smartdress -> are the description to the projects

Projects.js
import React, { useState } from 'react';
import CardItems from './CardItems';
import nazzle from '../assets/nazzle.png';
import smartdress from '../assets/smartdress.png';
import storyline from '../assets/2.png';
import hel from '../assets/hel.png';

import Nazzle from '../pages/Nazzle';
import Smartdress from '../pages/Smartdress';
import Hel from '../pages/Hel';
import Storyline from '../pages/Storyline';
import Songstories from '../pages/Songstories';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams,
} from 'react-router-dom';

function Projects() {
  return (
    <div id='projects' className='container mx-auto'>
      <h1 className='line absolute ml-8 -mt-2 z-0 text-xl'>Projects</h1>

      <CardItems
        bg='bg-smartdress'
        text='Smartdress'
        subtitle='Project (Studium)'
        description='Spielerisch die Natur erkunden und
spannende Rätsel mit Augmented
Reality lösen'
        src={smartdress}
        link='/project/smartdress'
      />

      <CardItems
        bg='bg-nazzle'
        text='Nazzle'
        subtitle='Project (Studium)'
        description='Spielerisch die Natur erkunden und
spannende Rätsel mit Augmented
Reality lösen'
        src={nazzle}
        link='/project/nazzle'
      />

      <CardItems
        bg='bg-storyline'
        text='Storyline'
        subtitle='Forschungsprojekt (Studium)'
        description='Companion fĂĽr SchĂĽler zur 
spielerischen Prävention von
Fake News und Cyber Mobbing
in sozialen Netzwerken'
        src={storyline}
        link='/project/storyline'
      />

      <CardItems
        bg='bg-hel'
        text='Hygiene Lab'
        subtitle='Client work'
        description='Schaffen eines erzählenswertens
Erlebnis vom Besuch öffentlicher
Toiletten mit kontaktlosen Produkten'
        src={hel}
        link='/project/hygienelab'
      />

      <CardItems
        bg='bg-nazzle'
        text='Nazzle'
        subtitle='Project (Studium)'
        description='Spielerisch die Natur erkunden und
spannende Rätsel mit Augmented
Reality lösen'
        src={nazzle}
        link='/project/songstories'
      />
    </div>
  );
}

export default Projects;

Note: Projects render all cards of the single projects

CardItem.js
import React from 'react';
import Projects from '../components/Projects';

import Nazzle from '../pages/Nazzle';
import Smartdress from '../pages/Smartdress';
import Hel from '../pages/Hel';
import Storyline from '../pages/Storyline';
import Songstories from '../pages/Songstories';

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function CardItems(props) {
  return (
    <div className='container'>
      <div className='my-12 mx-8 sm:mx-16 lg:mx-32 xl:mx-48 2xl:mx-80'>
        <div
          className={`shadow-md rounded overflow-hidden flex flex-col lg:flex-row ${props.bg}`}
        >
          <img
            className='z-0 max-h-64 px-4 sm:max-h-80 order-1 lg:order-2 mx-auto my-12 sm:my-16 lg:mr-8 lg:max-h-96 xl:mr-16'
            src={props.src}
          ></img>
          <div className='flex flex-col justify-around order-2 lg:order-1 mb-12 sm:mb-12 mx-8 sm:mx-16'>
            <div className=''>
              <h1 className='font-bold'>{props.text}</h1>
              <h3>{props.subtitle}</h3>
              <p className='text-gray-700'>{props.description}</p>
            </div>
            <div className='mt-4'>
              <div className='justify-center flex mt-2 lg:justify-start'>
                <Link
                  to={props.link}
                  className='btn bg-indigo-700 hover:bg-indigo-300 font-bold text-white rounded shadow-md'
                >
                  Read more
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Router></Router>
    </div>
  );
}
export default CardItems;

Note: for better understanding how the cards look likes

Source: Ask Javascript Questions

LEAVE A COMMENT