javascript - React Component Rendering Twice

So like the title says my homepage of my application is rendering twice for some reason and I am not sure why. From my BrowserRouter I am initially calling one JS file and from there I call my HomePage ponent and React Router but then my page is rendering twice and I am not sure why.

My Browser 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'));

Then App.js is called:

const App = () => (
    <div>
        <HomePage />
        <Route />
    </div>
)

export default App;

Then my homepage ponent(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;

And Route.js:

const Routes = () => (
    <main>
    <Switch>
        <Route exact path='/' ponent={HomePage}/>
        <Route exact path='/projects' ponent={Projects}/>
    </Switch>
    </main>
)

But then my page is rendering like this:

I am really confused so any advice will help! I'm guessing there may an issue because I am calling a jsx file instead of a js file in my route?

My Browser 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'));

Then App.js is called:

const App = () => (
    <div>
        <HomePage />
        <Route />
    </div>
)

export default App;

Then my homepage ponent(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;

And Route.js:

const Routes = () => (
    <main>
    <Switch>
        <Route exact path='/' ponent={HomePage}/>
        <Route exact path='/projects' ponent={Projects}/>
    </Switch>
    </main>
)

But then my page is rendering like this:

I am really confused so any advice will help! I'm guessing there may an issue because I am calling a jsx file instead of a js file in my route?

Share Improve this question asked Dec 29, 2018 at 7:28 Demetrius 4512 gold badges9 silver badges21 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

This is happening because you're rendering it twice, once at the top-level of App, and again within the Route ponent (when you visit /).

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

You need to make a decision to either show HomePage only when / is visited, or always show it no matter which route is visited.

For the former, you should remove HomePage from App:

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

For the latter, you should remove HomePage from Route:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - React Component Rendering Twice - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)