I am very new to ReactJS. My query is I want to stay on same component of page in ReactJS. Below is my code.
App.js
import React, { Component } from 'react' import { BrowserRouter as Router, Route } from 'react-router-dom'
import { authenticationService } from './_service/authentication.service'
import { PrivateRoute } from './components/Routes/PrivateRoute';
import Navbar from './components/Navbar/Navbar'
import Landing from './components/Landing/Landing'
import Login from './components/Login/Login'
import Register from './components/Register/Register'
import Home from './components/Home/Home'
import SideBar from './components/SideBar/SideBar';
class App extends Component { render(){
return (
<Router>
<div className="App">
<Navbar />
{authenticationService.currentUserValue ? <SideBar/> : null}
<Route exact path="/" component={Landing} />
<div className="container">
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/home" component={Home} />
</div>
</div>
</Router>
) } }
Above route is main route file of my project after login it redirects me to home page. On Home page i am loading Header, Sidebar and Content(Component). Here the content(Component) is different which depends on sidebar links.
Home.js
import React, { Component } from 'react'
import { BrowserRouter as Router} from 'react-router-dom'
// import Home from './components/Home/Home'
import { authenticationService } from '../../_service/authentication.service'
// import Navbar from '../Navbar/Navbar'
import Sidebar from '../SideBar/SideBar'
// import Landing from '../Landing/Landing'
import Profile from '../Profile/Profile'
import AboutUs from '../Profile/AboutUs'
class Home extends Component {
constructor(props){
super(props);
if (authenticationService.currentUserValue) {
// this.props.history.push('/home');
this.props.history.push('/home');//this.state.initialPage
}
this.state={
initialPage:<Profile/>
}
}
routeSidebar = (flag) => {
switch(flag) {
case 'AboutUs':
this.setState({
initialPage:<AboutUs/>
})
break;
default:
this.setState({
initialPage:<Profile/>
})
break;
}
}
render() {
const {initialPage} = this.state;
return (
<Router>
<div className="Home">
<Sidebar routeSidebar={this.routeSidebar} />
{initialPage}
</div>
</Router>
);
}
}
export default Home;
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire