CODEWITHSUNDEEP
reactjs
user11419421
user11419421

Reputation:

P tag from one page in React site not showing despite same code/working in the rest

May be a small mistake somewhere. I can see from the address bar that the RouteLink is working when the About page is clicked on in the nav bar but the content of the p tag inside my About component is not showing on the page despite the code being the same as the other components and those working.

import React from 'react'

function CV() {
    return(
        <div id="cv">
            <p>adsfadsfasdfa</p>
            <br>
            </br>
        </div>

    )
}

export default CV;

^This shows an example of code from a working page/component. One below however, doesn't work.

import React from 'react'

function About() {
    return(
        <div id="about">
            <p>Hi, I'm John. I have a passion for web technologies.</p>
            <br>
            </br>
        </div>

    )
}

export default About;

My Nav Bar:

import React from 'react'; import {Link} from 'react-router-dom'

function NavBar() {
    return(
        <ul>
            <li>
                <Link to="/">John Smith</Link>
            </li>
            <li>
                <Link to="/about">About</Link>
            </li>
            <li>
                <Link to="/portfolio">Portfolio </Link>
                
            </li>
            <li>
                <Link to="/cv">CV</Link>
            </li>
            
        </ul>
    );
}

export default NavBar;

App.js:

import React from 'react';
import Home from './Home';
import Portfolio from './Portfolio';
import CV from './CV';
import {Route} from "react-router-dom";
import NavBar from './NavBar';
import About from './About';

function App() {
  return (
    <div className="App">
       <NavBar />
      <Route exact path='/' component={Home} />
      <Route exact path="./about" component={About} />
      <Route exact path='/portfolio' component={Portfolio} />
      <Route exact path='/cv' component={CV} />
    </div>
  );
}

export default App;
enter code here

Upvotes: 0

Views: 1065

Answers (2)

Mohammad Abdul Alim
Mohammad Abdul Alim

Reputation: 488

In your App.js replace <Route exact path="./about" component={About} /> with <Route exact path="/about" component={About} /> and also <br/> being a single tag replace <br></br> with it.

Upvotes: 0

philippbauch
philippbauch

Reputation: 61

You probably just have a typo in your About page's route declaration and want to remove the . from the path prop in App.js:

Currently:

<Route exact path="./about" component={About} />

But it should be:

<Route exact path="/about" component={About} />

Upvotes: 0

Related Questions