React 组件渲染两次
Dem*_*ius 2 javascript reactjs
所以就像标题说我的应用程序的主页由于某种原因呈现两次，我不知道为什么。在我的 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>
)