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