javascript - React 组件渲染两次
问题描述
所以就像标题说的那样,我的应用程序的主页由于某种原因渲染了两次,我不知道为什么。我最初从 BrowserRouter 调用一个 JS 文件,然后从那里调用我的 HomePage 组件和 React Router,但随后我的页面渲染了两次,我不知道为什么。
我的浏览器路由器(index.js):
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App';
render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'));
然后调用 App.js:
const App = () => (
<div>
<HomePage />
<Route />
</div>
)
export default App;
然后我的主页组件(index.jsx):
import React from 'react';
import { Link } from 'react-router-dom';
const HomePage = () => (
<html>
<ul><li>Home</li>
<Link to='/projects'><li>Projects</li></Link>
<li>Future Work</li>
<li>About Me</li>
</ul>
<title>A Peak Into My Life</title>
<h2>New Production Build</h2>
<body>
Projects Will Be Shown Here:
<body> This is the Flinder application: </body>
</html>
)
export default HomePage;
和 Route.js:
const Routes = () => (
<main>
<Switch>
<Route exact path='/' component={HomePage}/>
<Route exact path='/projects' component={Projects}/>
</Switch>
</main>
)
但后来我的页面呈现如下:
我真的很困惑,所以任何建议都会有所帮助!我猜可能存在问题,因为我在路由中调用的是 jsx 文件而不是 js 文件?
解决方案
发生这种情况是因为您要渲染它两次,一次是在顶层,一次是App
在Route
组件内(当您访问时/
)。
const App = () => (
<div>
<HomePage /> {/* you are rendering it here */}
<Route /> {/* you are also rendering HomePage within Route */}
</div>
)
您需要决定是HomePage
仅在/
访问时显示,还是无论访问哪条路线都始终显示。
对于前者,您应该HomePage
从中删除App
:
const App = () => (
<div>
<Route /> {/* only render HomePage within Route, when / is visited */}
</div>
)
对于后者,您应该HomePage
从中删除Route
:
const Routes = () => (
<main>
<Switch>
<Route exact path='/' component={() => 'Welcome to the home page'}/>
<Route exact path='/projects' component={Projects}/>
</Switch>
</main>
)
推荐阅读
- javascript - HTML / JS 表格 - 根据输入数字计算
- javascript - 当发出命令的用户对以下选项之一做出反应时,如何让机器人编辑自己发送的消息?
- java - Java中的大写单词
- javascript - 从滑块的进度条中取消链接 mat-slider thumb 标签值
- scala - 合成语法树和变量树以避免跨阶段评估
- flutter - Flutter/Dart 从 Firestore 投射到地图中
- sql - 为什么我在 vba 代码中使用 SQL 会收到错误消息?
- google-bigquery - 如何将存储在 GG Bigquery 中的数据文件导出到 GZ 文件夹中?
- scala - flatMap、flatTap、evalMap 和 evalTap 的区别
- arangodb - 我如何使用单个 aql 查询更新多个集合中的单个或多个文档