I am in the process of setting up a landing page that will then redirect to my main home page using React. I have created a component for the landing page named Splash. I am attempting to utilize IndexRoute to make sure my app initially displays Splash as the first page. Below is my code snippet from app.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import {Provider} from 'react-redux';
import store from '../store';
import App from 'views/App';
import Home from 'views/Home';
import About from 'views/About';
import Cart from 'views/webcart';
ReactDOM.render(
<Provider store={store}>
<Router history={hashHistory}>
<Route path='/' component={App}>
<IndexRoute component={Splash} />
<Route path='about' component={About} />
<Route path='Cart' component={Cart} />
<Route path='Home' component={Home}
</Route>
</Router>
</Provider>,
document.getElementById('app') // eslint-disable-line
);
The content of my splash.js file is as follows:
import React, { Component } from 'react';
import Woods from './woods.jpeg';
import Logo1 from './whitestar.png';
export default class Splash extends Component {
render() {
return(
<div id='Splashwrapper'>
<img src={Woods}></img>
<img src={Logo1}></img>
</div>
);
}
}
An issue I am facing is that both my home and landing pages are displaying together instead of just the landing page showing up initially. How can I resolve this?
EDIT
In my Home component, there might be an opportunity to accomplish what I intend with the landing page:
import React, { Component } from 'react';
import { Link } from 'react-router';
import Jag from './jag.jpg';
import Jag2 from './jag2.jpg';
import Logo from './nsplogo.jpeg';
var Music = React.createClass({
render: function() {
return (
<div>
<h2> BBB </h2>
</div>
);
}
});
export default class Home extends Component {
soundCloud() {
var SC = require('soundcloud');
SC.initialize({
client_id: 'YOUR_CLIENT_ID',
redirect_uri: 'http://example.com/callback'
});
}
constructor(){
super();
this.state = {
showSquareOne:false,
showSquareTwo:false,
}
this.toggleShowSquare = this.toggleShowSquare.bind(this);
}
toggleShowSquare(property){
this.setState((prevState)=>({[property]:!prevState[property]}))
}
componentDidMount () {
window.scrollTo(0, 0)
}
render() {
return (
<div className='Home' id='Home'>
<div id="musicwrapper" className={this.state.showSquareThree?'':'invisible'}>
<div id='musicsquare' className={this.state.showSquareOne?'':'invisible'}>
<h1>AAA</h1>
<div id="musicpics">
<img src={Jag} tabIndex="1" id='jag1'></img>
<img src={Jag2} tabIndex="1" id='jag2'></img>
</div>
<iframe width="560" height="315" src="" frameBorder="0" allowFullScreen></iframe>
<div id='Body'></div>
</div>
</div>
<div id='musicMenu'>
<ul>
<li id="music" onClick={()=>this.toggleShowSquare('showSquareOne')}>Music</li>
<li id="shows" >Shows</li>
<li id="collections">Collections</li>
</ul>
</div>
</div>
);
}
}
Additionally, I have a Menu component in my app that always stays on top of the page, causing issues with the landing page display. Even though the landing page is present, the menu still shows up simultaneously.