Réagir Routeur Dom comment faire pour rediriger vers d'Autres App.js itinéraire lorsque vous êtes en toute subRoute de route [dupliquer]

0

La question

Je suis nouveau à réagir & réagir routeur dom v5, aussi mon anglais est mauvais. Je vous remercie à l'avance de m'aider.

mon problème: J'ai 2 Routes Principales dans mon App.js itinéraire

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;

le authcontainer de 2 sous itinéraires "/signin" "/signup"

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);

alors la mon publiccontainer avons 3 sous itinéraires "/" "/produit" "/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

mon panier composant ne rendent si isAuth est vrai, sinon il va rediriger vers "/auth/signin"

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

Le problème est, sa tente de rediriger vers "/auth/signin" mais il est toujours dans le "/" à la page enter image description here

Quand j'ai frappé le recharger enfin rediriger vers "/auth/signin"enter image description here

Comment puis-je résoudre ce problème, j'apprécie vraiment votre aide

Mise à JOUR

c'est aperçu de mes itinéraires planifiés enter image description here

Je pense d'ailleurs que lorsque le mycart isAuth est fausse, alors il essaie de Lier à /auth/signin qui provoque le lien en haut de l'url pour pointer correctement à auth signin, mais après qu'il vérifie uniquement la subroutes de la publiccontainer au lieu de vérifier l'app.js itinéraires enter image description here

Mais quand je le recharger, il commencer à chercher la bonne route à partir de la app.js les routes de retour de l'itinéraire prévu de la page et qui est le signe de

enter image description here

1

La meilleure réponse

0

J'ai lu presque la même question en termes de rendu le chemin d'accès correct au moment de frapper, rafraîchir

ici Réagir Routeur ne fonctionne qu'après l'actualisation de la page

Le problème est que je suis emballage de la sous les routes avec un nouveau routeur, j'ai donc essayé de supprimer le Routeur jsx qui est d'emballage de l' Interrupteur> & autres subroutes dans les deux AuthContainer.js & PublicContainer.js

c'est la mise à jour 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);

Et c'est le 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

Liée à l'une de mes réponses.
Drew Reese

@DrewReese Merci Beaucoup! Dieu vous bénisse
TheNewBeeeee

Dans d'autres langues

Cette page est dans d'autres langues

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................