CODEWITHSUNDEEP
javascriptreactjsreact-router
whiterabbit
whiterabbit

Reputation: 27

How to render new page in React using react-dom-router?

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

// 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: enter image description here

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 id="root"></div>
    <div class="parallax-ATLA"></div>
    <div class="iframe-container">
      <iframe width=50% height=80% src="https://www.youtube-nocookie.com/embed/d1EnW4kn1kg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="parallax-LOK"></div>
    <div class="iframe-container">
      <iframe width=50% height=80% src="https://www.youtube-nocookie.com/embed/NBNpGCIavwA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </body>

Upvotes: 1

Views: 5945

Answers (2)

vahissan
vahissan

Reputation: 2332

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;

Upvotes: 1

Jason
Jason

Reputation: 367

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.

Upvotes: 1

Related Questions