兩次React組件渲染

Question

因此，正如標題所述，由於某種原因，我的應用程序主頁呈現了兩次，但我不確定為什么。 我最初從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文件？

Answer 1

之所以發生這種情況，是因為您要渲染兩次，一次是在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>
)

兩次React組件渲染

問題描述

1 個解決方案

解決方案1
4 已采納 2018-12-29 07:32:59

兩次React組件渲染

問題描述

1 個解決方案

解決方案1 4 已采納 2018-12-29 07:32:59

解決方案1
4 已采納 2018-12-29 07:32:59