所以就像标题说的那样，我的应用程序的主页由于某种原因渲染了两次，我不确定为什么。我最初从我的 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，还是无论访问哪条路径都始终显示它。
对于前者，您应该从 App 中删除 HomePage:
const App = () => (
<div>
<Route /> {/* only render HomePage within Route, when / is visited */}
</div>
)
对于后者，您应该从 Route 中删除 HomePage:
const Routes = () => (
<main>
<Switch>
<Route exact path='/' component={() => 'Welcome to the home page'}/>
<Route exact path='/projects' component={Projects}/>
</Switch>
</main>
)
关于javascript - React 组件渲染两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53967598/