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

Question

所以我尝试渲染 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>

Answer 1

您确实不需要将 HTML 直接添加到主 index.html。你在 React 中所做的一切都呈现在 inside root div 中。但是由于您已经添加了 HTML，所以 React 呈现的所有内容现在都将位于添加的 HTML 之上。您直接添加的任何代码肯定都可以放入自定义组件中。

Answer 2

看起来您希望 Air 组件在您单击空气图标后成为页面的唯一内容。那么你的 NavBar 应该作为单独路由的一部分在 switch 内部。

我会这样做：

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;