प्रतिक्रिया रूटर डोम रीडायरेक्ट करने के लिए कैसे करने के लिए अन्य App.js मार्ग में हैं, जब आप किसी भी subRoute के किसी भी मार्ग [नकल]

0

सवाल

मैं नया हूँ प्रतिक्रिया करने के लिए & प्रतिक्रिया रूटर डोम v5, भी है. आप पहले से धन्यवाद मेरी मदद करने के लिए.

मेरी समस्या: मैं 2 मुख्य मार्गों में App.js मार्ग

import { Suspense } from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'

/* Pges */
import AdminContainer from './Pages/Admin/AdminContainer';
import PublicContainer from './Pages/Public/PublicContainer';
import NotFound from './Pages/NotFound'
import AuthContainer from './Pages/Auth/AuthContainer';

/* Protected Route */

/* Helpers */

function App() {
  console.log("APP")
  return (
    <Suspense fallback={(<p>Loading</p>)}>
      <Router>
        <Switch>
          <Route path="/auth" component={AuthContainer} />
          <Route path="/admin" component={AdminContainer} />
          <Route path="/*" component={PublicContainer} />
          <Route path="*" component={NotFound} />
        </Switch>
      </Router>
    </Suspense>
    )
  }
export default App;

के authcontainer है 2 उप मार्गों "/साइन इन करें" "/साइनअप"

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  withRouter
} from "react-router-dom";

// PAGES
import Signin from "../Auth/Signin";
import Signup from "../Auth/Signup";

const AuthContainer = () => {
  console.log("AUTH")
  return (
    <div>
      <Router>
        <Switch>
          <Route exact path="/auth" component={Signin}/>
          <Route exact path="/auth/signin" component={Signin}/>
          <Route exact path="/auth/signup" component={Signup}/>
        </Switch>
      </Router>
    </div>
  );
};

export default withRouter(AuthContainer);

फिर मेरे publiccontainer है 3 उप मार्गों "/" "उत्पाद/" "/mycart"

/* Dependencies */
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom'

/* Components */
import Header from "../../Components/Header"
import Products from "./Products"
import Home from "./Home"
import UserProfile from "../User/AccountProfile"

import MyCart from '../Public/MyCart'

const PublicContainer = () => {
    console.log("PUBLIC")
    return (
        <div>
            <Router>
                <Header />
                <Switch>
                    <Route exact path='/' render={(props) => <Home />} />
                    <Route exact path='/products' render={(props) => <Products />} />
                    <Route exact path='/mycart' render={(props) => <MyCart isAuth={false} />} />
                </Switch>
               </Router>
        </div>
    )
}

export default PublicContainer

मेरी गाड़ी घटक केवल प्रस्तुत करना अगर isAuth सच है, और यह रीडायरेक्ट करेगा "/प्रमाणन/साइन इन करें"

import React from 'react'
import { Redirect } from 'react-router'

const MyCart = ({isAuth}) => {
    if(!isAuth)
        return (<Redirect  from='*' to='/auth/signin'></Redirect>)
    return (
        <div>
            my cart
        </div>
    )
}

export default MyCart

समस्या है, कोशिश करने के लिए पुनर्निर्देशित करने के लिए "/प्रमाणन/साइन इन" लेकिन यह अभी भी है में "/" पेज enter image description here

जब मैं अंत में इसे पुनः लोड करने के लिए पुनर्निर्देशन "/प्रमाणन/साइन इन करें"enter image description here

कैसे कर सकते हैं मैं इस मुद्दे को ठीक है, मैं सच में तुम्हारी मदद की सराहना

अद्यतन

इस अवलोकन की योजना बनाई मार्गों enter image description here

वैसे मुझे लगता है कि जब mycart isAuth गलत है, तो यह करने की कोशिश करता है के लिए लिंक /प्रमाणन/साइन इन का कारण बनता है जो लिंक में शीर्ष करने के लिए url सही ढंग से बात करने के लिए अधिकृत साइन इन करें, लेकिन बाद कि यह केवल जांच के subroutes के publiccontainer के बजाय की जाँच app.js मार्गों enter image description here

लेकिन जब मैं इसे पुनः लोड, यह खोज शुरू करने के सही मार्ग से app.js जो मार्गों वापसी की उम्मीद है और मार्ग और पेज है जो हस्ताक्षर में

enter image description here

1

सबसे अच्छा जवाब

0

मैंने पढ़ा है एक लगभग इसी तरह के सवाल के संदर्भ में केवल प्रतिपादन सही पथ मार जब ताज़ा

यहाँ प्रतिक्रिया रूटर काम करता है के बाद ही पृष्ठ ताज़ा

समस्या मैं था हूँ लपेटकर उप-मार्गों के साथ एक नया रूटर है, तो मैं हटाने की कोशिश की रूटर jsx है कि लपेटकर स्विच> और अन्य subroutes में दोनों AuthContainer.js & PublicContainer.js

इस अद्यतन AuthContainer.js

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  withRouter
} from "react-router-dom";

// PAGES
import Signin from "../Auth/Signin";
import Signup from "../Auth/Signup";

const AuthContainer = () => {
  console.log("AUTH")
  return (
    <div>
        <Switch>
          <Route exact path="/auth/signin" component={Signin}/>
          <Route exact path="/auth/signup" component={Signup}/>
          <Route exact path="/auth" component={Signin}/>
        </Switch>
    </div>
  );
};

export default withRouter(AuthContainer);

और यह है PublicContainer.js

/* Dependencies */
import { Route, Switch } from 'react-router-dom'

/* Components */
import Header from "../../Components/Header"
import Products from "./Products"
import Home from "./Home"
import UserProfile from "../User/AccountProfile"

import MyCart from '../Public/MyCart'

/* Protected */

const PublicContainer = ({toAuth}) => {
    console.log("PUBLIC")
    return (
        <div>
                <Header />
                <Switch>
                    <Route exact path='/products' render={(props) => <Products />} />
                    <Route exact path='/profile' render={(props) => <UserProfile />} />
                    <Route exact path='/mycart' render={(props) => <MyCart />} />
                    <Route exact path='/' render={(props) => <Home />} />
                </Switch>
        </div>
    )
}

export default PublicContainer

enter image description here

2021-11-21 16:31:24

लिंक में से एक के लिए अपने जवाब.
Drew Reese

@DrewReese बहुत बहुत धन्यवाद! भगवान आपका भला करे
TheNewBeeeee

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में