प्रतिक्रिया सीखने की कोशिश कर रहा हूं और मैंने लिंक की एक साधारण सूची के साथ एक नेवबार बनाया है जो App.tsx में मार्गों को इंगित करता है। चूंकि यह वर्तमान में काम कर रहा है, मेरे सभी घटक नवबार प्रदर्शित करते हैं। लॉगिन घटक सहित, जो मैं नहीं चाहता।

जिस व्यवहार को मैं ढूंढ रहा हूं वह ऐप लॉन्च होने पर नेवबार के बिना लॉगिन घटक प्रदर्शित करेगा, इसलिए पथ "/"। और फिर एक बार जब वे लॉगिन बटन पर क्लिक करते हैं, तो यह "उन्हें लॉग इन" करेगा और नेवबार के साथ एक डिफ़ॉल्ट घटक प्रदर्शित करेगा और उन्हें ऐप के चारों ओर घूमने की अनुमति देगा।

राज्य के हिस्से में आने से पहले, मुझे यह जानना होगा कि मैं इसे पहले कैसे प्राप्त कर सकता हूं। मैंने बिना किसी लाभ के App.tsx में नेवबार स्थिति को फिर से व्यवस्थित करने का प्रयास किया (नवबार में लिंक हैं, इसलिए इसे राउटर के भीतर होना चाहिए)। अन्य सभी मार्गों को नेवबार की भी आवश्यकता होती है, इसलिए इसे पहले रखना समझ में आता है, लॉगिन को छोड़कर (या कोई अन्य पृष्ठ जिसे मैं नेवबार शामिल नहीं करना चाहता)।

मैं अपना नेवबार घटक छोड़ दूंगा क्योंकि इसमें सिर्फ लिंक हैं। लेकिन मेरा ऐप घटक इस तरह दिखता है, जो उम्मीद है कि मैं जो याद कर रहा हूं उसे समझाने के लिए पर्याप्त है:

App.tsx:

 import * as React from "react";
 import { useState } from "react";
 import "./index.css";
 import {
   BrowserRouter as Router,
   Switch,
   Route,
   Redirect,
} from "react-router-dom";
 import Navbar from "./components/Navbar";
 import VisitLog from "./components/VisitList";
 import Dashboard from "./components/Dashboard";
 import Profile from "./components/Profile";
 import Login from "./components/Login"

 export default function App() {
    const [loggedIn, setLoggedIn] = useState(false);

    return (
      <div>
       <Router>
        <Navbar />
         <Switch>
          <Route exact path="/" />
          <Route path="/profile" component={Profile} />
          <Route path="/visits" component={VisitLog} />
          <Route path="/dashboard" component={Dashboard} />
          <Route path="/login" component={Login} />
        </Switch>
      </Router>
   </div>
 );
}

क्या मुझे अपने नावबार और मार्गों को पूरी तरह से फिर से काम करने की ज़रूरत है या क्या अपवाद बनाने का एक अपेक्षाकृत सरल तरीका है कि कौन से घटक नावबार को देखते हैं?

साथ ही, मैं समान प्रभाव प्राप्त करने के लिए अन्य विचारों के लिए खुला हूं। लॉग इन न होने पर किसी भी वेबसाइट में लॉग इन पेज प्रदर्शित करना एक मानक अभ्यास है, लेकिन मैं अपने नेवबार प्रदर्शन उद्देश्यों के लिए बहुत कुछ नहीं ढूंढ पा रहा था।

बहुत साधारण। मेरा कुछ छूट रहा है।

धन्यवाद!

0
MattoMK 17 सितंबर 2020, 20:36

1 उत्तर

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

क्या होगा यदि आप नेवबार प्रस्तुत करने से बचते हैं यदि उपयोगकर्ता लॉग इन नहीं है और इसे '/login'path पर पुनर्निर्देशित करें।

    return (
      <div>
       <Router>
        {lodggedIn ? <Navbar /> : <Redirect to="/login"/>}
         <Switch>
            <Route path='/login' component={() => <Login setLogin={(islogged)=> setIslogged(isLogged)}/>}/>            
         </Switch>
      </Router>
   </div>
 );

और अपने लॉगिन घटक में आप लॉगिन प्रयास के परिणाम को सेटलॉगिन फ़ंक्शन में प्रॉप्स में पास करते हैं। उदाहरण:

function attemptLogin(){
   let result = get login results
   this.props.setLogin(result);
}
1
Mumela 18 सितंबर 2020, 01:09