मैं रिएक्ट जेएस में एक लॉगिन और साइन अप पेज बनाने की कोशिश कर रहा हूं, विचार यह है कि उन्हें एक ही पृष्ठ पर प्रस्तुत किया जाना चाहिए, और उपयोगकर्ता उनके बीच स्विच करने में सक्षम होना चाहिए (कुछ इस तरह उदाहरण)

मैं घटकों (यूजस्टेट का उपयोग करके) के बीच टॉगल फ़ंक्शन बना सकता हूं, लेकिन समस्या यह है कि मुझे उपयोगकर्ता की पसंद के अनुसार यूआरएल बदलने की जरूरत है (यदि उपयोगकर्ता लॉगिन करना चाहता है, तो यूआरएल "/ लॉगिन" होना चाहिए, अगर साइन-अप => "/साइन अप करें")। मैंने रिएक्ट राउटर के साथ लॉगिन और साइनअप के लिए अलग-अलग घटक बनाए, लेकिन वे अलग-अलग पेजों पर खुल रहे हैं, जो मुझे हासिल करना अच्छा लगेगा, वह है दोनों को एक ही लॉगिन पेज पर रखना।

कोडसैंडबॉक्स में मेरा कोड

import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Login from "./Login";
import SignUp from "./SignUp";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/">
            <Login />
          </Route>
          <Route exact path="/sign-up" component={SignUp} />
        </Switch>
      </Router>
    </div>
  );
}
import React from "react";
import { Link } from "react-router-dom";

export default function Login() {
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", justifyContent: "space-evenly" }}>
        <Link to="/">
          <h1>Login</h1>
        </Link>

        <Link to="/sign-up">
          <h1>Sign Up</h1>
        </Link>
      </div>

      <form
        style={{ display: "flex", flexDirection: "column", padding: "40px" }}
      >
        <input type="email" placeholder="email"></input>
        <input type="password" placeholder="password"></input>
      </form>
    </div>
  );
}

import React from "react";


export default function SignUp() {
  return (
    <div>

   <form style={{display:"flex", flexDirection:"column", padding:"40px"}}>
     <input type ="name" placeholder="Name"></input>
     <input type ="email" placeholder="email"></input>
     <input type ="password" placeholder="password"></input>
   </form>

   </div>
  );
}

मैं प्रतिक्रिया जेएस के लिए बिल्कुल नया हूं, इसलिए मुझे नहीं पता कि यह भी संभव है या नहीं। मैं किसी भी सुझाव और मदद की सराहना करता हूं, धन्यवाद।

2
nika 6 नवम्बर 2020, 06:23

3 जवाब

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

अलग से एक हेडर घटक बनाएं और इसे दोनों स्थानों (लॉगिन और साइनअप) घटकों में आयात करें।

उदाहरण

Header.js

export default function Header() {
  return (
    <div style={{ display: "flex", justifyContent: "space-evenly" }}>
    <Link to="/">
      <h1>Login</h1>
    </Link>

    <Link to="/sign-up">
      <h1>Sign Up</h1>
    </Link>
  </div>
  )
}

अब इसे लॉगिन और साइनअप घटकों में आयात करें

Login.js

<div style={{ display: "flex", flexDirection: "column" }}>
     <Header />

      <form
        style={{ display: "flex", flexDirection: "column", padding: "40px" }}
      >
        <input type="email" placeholder="email"></input>
        <input type="password" placeholder="password"></input>
      </form>
    </div>

साइनअप.जेएस

<div>
     <Header />
      <form
        style={{ display: "flex", flexDirection: "column", padding: "40px" }}
      >
        <input type="name" placeholder="Name"></input>
        <input type="email" placeholder="email"></input>
        <input type="password" placeholder="password"></input>
      </form>
    </div>

अपडेट किया गया लाइव वर्किंग डेमो

1
akhtarvahid 6 नवम्बर 2020, 07:12

सबसे पहले, लॉगिन घटक में 'लॉगिन' और 'साइन अप' लिंक शामिल न करें। उन्हें अपने App.js पर ले जाएं।

App.js

<div className="App">
  <Router>
    <Switch>
      <Route path="/">
        <div style={{ display: "flex", justifyContent: "space-evenly" }}>
          <Link to="/login">
            <h1>Login</h1>
          </Link>

          <Link to="/sign-up">
            <h1>Sign Up</h1>
          </Link>
        </div>

        <Route exact path="/sign-up" component={SignUp} />
        <Route exact path="/Login" component={Login} />
      </Route>
    </Switch>
  </Router>
</div>

ध्यान दें कि <Route exact path='/'> में exact को हटाना होगा ताकि आप रूट बदलने पर लॉगिन या साइन अप पेज को स्विच और रेंडर कर सकें। आप हमेशा रिएक्ट-राउटर ट्यूटोरियल देख सकते हैं।

और लॉगिन घटक के लिए, बस फॉर्म शामिल करें (जैसे आपने साइन अप घटक के लिए क्या किया) और यह पर्याप्त है।

अपडेट किया गया कोड सैंडबॉक्स

1
yimei 6 नवम्बर 2020, 06:48

<Login /> टैग को <App /> घटक से हटा दें और इसे component प्रोप के अंदर जोड़ दें जैसे साइनअप जोड़ा जाता है। आप लॉगिन पेज को "/" रूट में देखना अच्छा समझते हैं।

फिर लॉगिन घटक से <Link to="/"> टैग हटा दें और केवल <Link to="/sign-up" > रखें। फिर जब आप लॉगिन पेज में लिंक का अनुसरण करेंगे तो आपको साइनअप घटक पर भेज दिया जाएगा।

लेकिन, इसके लिए काम करने के लिए, आपको "प्रतिक्रिया-राउटर" से "इतिहास" की आवश्यकता होगी। "react" से "useHistory" आयात करें और history = useHistory() को अपने लॉगिन घटक के अंदर (और साइनअप घटक के साथ-साथ वापस रूट करने के लिए) डालें और <Link to="sign-up" onClick = {() => history.push('/sign-up')} जोड़ें।

0
wr93_ 6 नवम्बर 2020, 06:48