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?
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?
Share Improve this question asked Dec 29, 2018 at 7:28 DemetriusDemetrius 4512 gold badges9 silver badges21 bronze badges 01 Answer
Reset to default 7This 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>
)
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744206494a4563128.html
评论列表（0条）