时间戳

首页 > 解决方案 > 如何使用 react-dom-router 在 React 中渲染新页面？

javascript - 如何使用 react-dom-router 在 React 中渲染新页面？

问题描述

所以我试图渲染 4 个新的不同页面，它们使用这些图标作为链接： 在此处输入图像描述

// 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

在我的 App.jsx 中，我使用 react-router-dom 来路由和链接这些：

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;

但是，当我单击图像时，所有出现的都是这样的： 在此处输入图像描述

import React, { Component } from 'react' ;



class Air extends Component{
    render(){
        return(
            <div>
                air
            </div>
        ) 
     }
}

export default Air

我希望新呈现的页面只显示文本空气，但它会呈现该 div 以及主页 HTML/CSS。另外我想补充一点，我还直接在 index.html 中编辑了 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>

标签： javascriptreactjsreact-router

解决方案

单击空气图标后，您似乎希望空气组件成为页面的唯一内容。然后，您的 NavBar 应该作为单独路线的一部分位于开关内。

我会做这样的事情：

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;

推荐阅读