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 component 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 component(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='/' component={HomePage}/>
<Route exact path='/projects' component={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?
This is happening because you're rendering it twice, once at the top-level of App
, and again within the Route
component (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='/' component={() => 'Welcome to the home page'}/>
<Route exact path='/projects' component={Projects}/>
</Switch>
</main>
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.