Javascript 如何使用React dom路由器在React中呈现新页面？

因此，我尝试呈现4个新的不同页面，这些页面使用这些图标作为链接：

//我的导航栏组件：
从“React”导入React，{Component}；
从“/MenuItems”导入{MenuItems}
导入“./Navbar.css”
从'react router dom'导入{Link}；
类导航栏扩展组件{
render（）{
返回(

{MenuItems.map（（项，索引）=>{
返回(


)
})}

)
}
}
导出默认导航栏

在我的App.jsx中，我使用react路由器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}来自'React'；
从“/components/Navbar/Navbar”导入导航栏；
导入“./App.css”
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
//导航栏组件
从“/组件/水”导入水；
从“/components/Fire”导入火；
从“/components/Earth”导入接地；
从“/components/Air”导入空气；
类应用程序扩展组件{
render（）{
返回(
) 
}
}
导出默认应用程序；

但是，当我单击图像时，显示的是：

import React，{Component}来自'React'；
类空气扩展组件{
render（）{
返回(
空气
) 
}
}
导出默认空气

---

我希望新呈现的页面只显示文本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>

您真的不需要将HTML直接添加到main index.HTML。在React中执行的所有操作都在根div中呈现。但是由于您添加了HTML，React呈现的所有内容现在都将位于添加的HTML之上。您直接添加的任何代码都可以放入自定义组件中。

看起来您希望在单击Air图标后，Air组件成为页面的唯一内容。然后，导航栏应位于交换机内部，作为单独路线的一部分

我会这样做：

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;

import React，{Component}来自'React'；
从“/components/Navbar/Navbar”导入导航栏；
导入“./App.css”
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
//导航栏组件
从“/组件/水”导入水；
从“/components/Fire”导入火；
从“/components/Earth”导入接地；
从“/components/Air”导入空气；
//主页
常量Home=（）=>(
);
类应用程序扩展组件{
render（）{
返回(
) 
}
}
导出默认应用程序；

“我希望新呈现的页面只显示文本空气”这是我在您的代码屏幕截图中看到的内容。什么是“主页HTML/CSS”？这是不是

正文中react应用程序之外的所有其他标记？因此我应该重新编写代码，以便将HTML移动到自定义组件中。对不起，我是新手，在React教程中有人这样做了，所以我认为这很好。谢谢你让我知道。是的，我会把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>

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;