So I am trying to render 4 new different pages which use these icons as links:

// My navbar component:
import React, {Component} from 'react';
import {MenuItems} from './MenuItems'
import './Navbar.css'
import {Link} from 'react-router-dom';
class Navbar extends Component{ render(){ return( <nav className="NavbarItems"> <ul className="nav-menu"> {MenuItems.map((item, index) => { return ( <Link to={item.url}> <li key={index}> <a className={item.cName} href={item.url}> <img width = "70" height = "70" alt ="element imgages" src={item.image}></img> </a> </li> </Link> ) })} </ul> </nav> ) }
}
export default Navbar

In my App.jsx, I used the react-router-dom to route and link these:

import React, { Component } from 'react' ;
import Navbar from "./components/Navbar/Navbar";
import './App.css'
import { BrowserRouter as Router, Switch, Route} from "react-router-dom";
//navbar components
import Water from "./components/Water";
import Fire from "./components/Fire";
import Earth from "./components/Earth";
import Air from "./components/Air";
class App extends Component{ render(){ return( <Router> <div className="App"> <Navbar /> </div> <Switch> <Route exact path="/water" component={Water}/> <Route exact path="/earth" component={Earth}/> <Route exact path="/fire" component={Fire}/> <Route exact path="/air" component={Air}/> </Switch> </Router> ) }
}
export default App;

However, when I click on the images all that appears is this:

import React, { Component } from 'react' ;
class Air extends Component{ render(){ return( <div> air </div> ) }
}
export default Air

I am expecting the new rendered page to just show the text air, but it renders that div along with the main page HTML/CSS. Also I would like to add that I have also edited HTML directly inside my index.html.

<div></div> <div></div> <div> <iframe width=50% height=80% src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div></div> <div> <iframe width=50% height=80% src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </body>

1

2 Answers

You really shouldn't need to add HTML directly to the main index.html. Everything you do in React is rendered inside the root div. But since you have added HTML, everything React renders will now be on top of that added HTML. Whatever code you added directly can surely be placed into a custom component.

2

Looks like you want the Air component to be the ONLY content of the page after you click the air icon. Then your NavBar should be inside the switch as part of a separate route.

I would do something like this:

import React, { Component } from 'react' ;
import Navbar from "./components/Navbar/Navbar";
import './App.css'
import { BrowserRouter as Router, Switch, Route} from "react-router-dom";
//navbar components
import Water from "./components/Water";
import Fire from "./components/Fire";
import Earth from "./components/Earth";
import Air from "./components/Air";
// Home page
const Home = () => ( <div className="App"> <Navbar /> </div>
);
class App extends Component{ render(){ return( <Router> <Switch> <Route exact path="/" component={Home}/> <Route exact path="/water" component={Water}/> <Route exact path="/earth" component={Earth}/> <Route exact path="/fire" component={Fire}/> <Route exact path="/air" component={Air}/> </Switch> </Router> ) }
}
export default App;

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy