代码之家 › 专栏 › 技术社区 › Demetrius

反应组件渲染两次

reactjs javascript

Demetrius · 技术社区 · 6 年前

因此,正如标题所说,我的应用程序主页呈现了两次,出于某种原因,我不知道为什么。从我的浏览器路由器,我开始调用一个JS文件,从那里我调用主页组件和反应路由器,但是我的页面呈现了两次,我不知道为什么。

我的浏览器路由器(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文件?

1 回复 | 直到 6 年前

nem035 6 年前

这是因为你渲染了两次,一次是在 App 以及在 Route 组件(当您访问 / )

const App = () => (
    <div>
        <HomePage /> {/* you are rendering it here */}
        <Route />    {/* you are also rendering HomePage within Route */}
    </div>
)

你需要做出决定 HomePage 只有当 / 被访问,或者无论访问哪条路线都始终显示它。

对于前者,您应该删除 主页 从 应用程序 :

const App = () => (
    <div>
        <Route />    {/* only render HomePage within Route, when / is visited */}
    </div>
)

对于后者,您应该删除 主页 从 路线 :

const Routes = () => (
    <main>
    <Switch>
        <Route exact path='/' component={() => 'Welcome to the home page'}/>
        <Route exact path='/projects' component={Projects}/>
    </Switch>
    </main>
)

推荐文章