मैं लॉगिन के रूप में हेडर दिखा रहा हूं, जब मैं लॉग इन नहीं हूं तो रजिस्टर करें, जहां मैं लॉग इन हूं, मैं हेडर सूची को ग्राहकों, विभागों आदि के रूप में दिखाना चाहता हूं। जब मैं लॉग इन हो जाता हूं तो मैं हेडर को ग्राहकों, विभागों के रूप में नहीं देख पाता हूं यह हेडर को लॉगिन के रूप में दिखाता है, जब तक मैं पृष्ठ को रीफ्रेश नहीं करता तब तक पंजीकरण करें। ऐप.जेएस में मैंने टोकन प्राप्त होने पर लॉग इन हेडर या होम हेडर दिखाने के लिए एक शर्त जांच का उपयोग किया है। मैं देखता हूं कि यह ऐप.जेएस को प्रस्तुत नहीं कर रहा है पहला बुलावा।

import React from 'react';
import LoggedInRoutes from './components/routes/Loggedin-route';
import HomeRoute from './components/routes/Home-route';

function App() {
    const getToken = localStorage.getItem('token')
    if (getToken !== null) {
        return (
            <LoggedInRoutes />
        )
    }
    else {
        return (
            <HomeRoute />
        )
    }
}

export default App;

लॉगिन फॉर्म जिसके बाद ऐप होम में लॉग इन करता है

import React from 'react';
import { BrowserRouter, NavLink, Route, } from 'react-router-dom';
import CustomerList from '../customer/List';
import DepartmentList from '../department/List';
import CustomerNew from '../customer/New';
import EmployeeNew from '../employees/New';
import EmployeesList from '../employees/List';
import EmployeeShow from '../employees/EmployeeShow';
import RegisterForm from '../auth/Register-form';
import Logout from '../auth/Logout';
import '../../App.css';

class LoggedInRoutes extends React.Component {
    constructor() {
        super()
        this.handleLogout = this.handleLogout.bind(this)
    }

    handleLogout() {
        console.log(`logged out`)
        console.log(localStorage.getItem('token'))
        localStorage.removeItem('token')
    }

    render() {
        return (
            <BrowserRouter>
                <div>
                    <header>
                        <nav className="navbar">
                            <h1><NavLink to='/'>Dashboard </NavLink></h1>
                            <section className="main-nav">
                                <ul className="nav-items">
                                    <li className="nav-item">   <NavLink to='/customers'> Customers </NavLink></li>
                                    <li className="nav-item">   <NavLink to='/departments'> Departments </NavLink></li>
                                    <li className="nav-item">   <NavLink to='/employees'> Employees </NavLink></li>
                                    <Logout handleLogout={this.handleLogout} />
                                </ul>
                            </section>
                        </nav>
                    </header>

                    <Route path='/customers' exact={true} component={CustomerList} />
                    <Route path='/departments' component={DepartmentList} />
                    <Route path='/customers/new' component={CustomerNew} />
                    <Route path='/employee/new' component={EmployeeNew} />
                    <Route path='/employees' exact={true} component={EmployeesList} />
                    <Route path='/employees/:id' component={EmployeeShow} />
                    <Route path='/register' component={RegisterForm} />
                    <Route path='/logout' />
                    <Route path='/' exact={true} />
                </div>
            </BrowserRouter>
        )
    }
}
export default LoggedInRoutes
0
Biswajeet gope 22 अगस्त 2019, 08:18

1 उत्तर

सबसे बढ़िया उत्तर

क्या आप इसे नीचे की तरह इस्तेमाल कर सकते हैं

import React from "react";
import { BrowserRouter, NavLink, Route, Switch } from "react-router-dom";
import CustomerList from "../customer/List";
import DepartmentList from "../department/List";
import CustomerNew from "../customer/New";
import EmployeeNew from "../employees/New";
import EmployeesList from "../employees/List";
import EmployeeShow from "../employees/EmployeeShow";
import RegisterForm from "../auth/Register-form";
import Logout from "../auth/Logout";
import Private from "path of private file"
import "../../App.css";

const ContentRoute = () => {
  return (
    <Switch>
      <Route path="/customers" exact={true} component={CustomerList} />
      <Route path="/departments" component={DepartmentList} />
      <Route path="/customers/new" component={CustomerNew} />
      <Route path="/employee/new" component={EmployeeNew} />
      <Route path="/employees" exact={true} component={EmployeesList} />
      <Route path="/employees/:id" component={EmployeeShow} />
    </Switch>
  );
};

class LoggedInRoutes extends React.Component {
  constructor() {
    super();
    this.handleLogout = this.handleLogout.bind(this);
  }

  handleLogout() {
    console.log(`logged out`);
    console.log(localStorage.getItem("token"));
    localStorage.removeItem("token");
  }

  render() {
    return (
      <div>
        <header>
          <nav className="navbar">
            <h1>
              <NavLink to="/">Dashboard </NavLink>
            </h1>
            <section className="main-nav">
              <ul className="nav-items">
                <li className="nav-item">
                  <NavLink to="/customers"> Customers </NavLink>
                </li>
                <li className="nav-item">
                  <NavLink to="/departments"> Departments </NavLink>
                </li>
                <li className="nav-item">
                  <NavLink to="/employees"> Employees </NavLink>
                </li>
                <Logout handleLogout={this.handleLogout} />
              </ul>
            </section>
          </nav>
        </header>
        <ContentRoute />
      </div>
    );
  }
}

const MainRoute = () => {
  return (
    <BrowserRouter>
      <Route path="/register" component={RegisterForm} />
      <Private component={LoggedInRoutes} />
    </BrowserRouter>
  );
};
export default MainRoute;

मुख्य मार्ग में उन मार्गों को जोड़ें जहां आपको शीर्षलेख की आवश्यकता नहीं है और सामग्री में शीर्षलेख के साथ मार्ग जोड़ें

और app.js उपयोग के लिए

import React from "react";
import { Route, Redirect } from "react-router-dom";

const Private = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      const getToken = localStorage.getItem('token')
      if (!getToken) {
        return (
          <Redirect
            to={{
              pathname: "/login"
            }}
          />
        );
      } else {
        return <Component {...props} />;
      }
    }}
  />
);

export default Private;

2
Vipin Yadav 22 अगस्त 2019, 10:37