ठीक है तो मूल रूप से मैं प्रतिक्रिया करने के लिए नया हूं और एक प्रतिक्रिया ऐप में प्रतिक्रिया-राउटर-डोम का उपयोग करने की कोशिश कर रहा था, मूल रूप से मैं जो चाहता हूं वह है कि मैं अपना रूट रूट "/" को "/ व्यवस्थापक" पर पुनर्निर्देशित करना चाहता हूं और फिर "/ व्यवस्थापक " से "/ admin/login" यूआरएल को मेरे द्वारा लिखे गए कोड से रीडायरेक्ट किया जा रहा है लेकिन मुझे पेज को इसके बजाय घटक नहीं मिला है।

मेरा ऐप घटक

function App() {
  return (
    // BrowserRouter
    <Router>
      <Switch>
        <Route exact={true} path="/">
          <Redirect to="/admin" />
        </Route>
        <Route exact={true} path="/admin" component={Admin} />
        <Route path="*" component={NotFound} />
      </Switch>
    </Router>
  );
}
}

मेरा व्यवस्थापक घटक

export default function Admin(props: any) {
  useEffect(() => {
    console.log(props);
  });
  return (
    <div>
      <h1>Admin</h1>
      <Route path={`${props.match.path}`}>
        <Redirect to={`${props.match.path}/login`} exact={true} />
      </Route>

      <Route
        exact={true}
        path={`${props.match.path}/login`}
        component={Login}
      />
    </div>
  );
}

मेरा लॉगिन घटक


export default function Login(props: any) {
  return (
    <div>
      <h1>Login</h1>
    </div>
  );
}
0
Sarthak Agrawal 17 जून 2020, 10:32

1 उत्तर

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

एपीपी घटक में व्यवस्थापक पथ से सटीक निकालें।

function App() {
  return (
    // BrowserRouter
    <Router>
      <Switch>
        <Route exact path="/">
          <Redirect to="/admin" />
        </Route>
        <Route path="/admin" component={Admin} />
        <Route path="*" component={NotFound} />
      </Switch>
    </Router>
  );
}
}

व्यवस्थापक घटक में सटीक जोड़ें

export default function Admin(props: any) {
  useEffect(() => {
    console.log(props);
  });
  return (
    <div>
      <h1>Admin</h1>         
      <Switch>
        <Route exact path={`${props.match.path}`}>
          <Redirect to={`${props.match.path}/login`} exact={true} />
        </Route>    
        <Route
          exact={true}
          path={`${props.match.path}/login`}
          component={Login}
        />
        <Redirect to='404-page-path' />
      </Switch>
    </div>
  );
}

इसके अलावा, मैं आपको एक लिंटर का उपयोग करने की सलाह दूंगा, सटीक = {सत्य} लिखना आवश्यक नहीं है, केवल सटीक लिखना ही पर्याप्त है।

४०४ पेज के लिए टिप्पणी के अनुसार संपादित करें।

1
Sudhanshu Kumar 17 जून 2020, 12:10