Reagire Router Dom come reindirizzare ad Altri App.js percorso quando ci sono in qualsiasi subRoute di qualsiasi percorso [duplica]

0

Domanda

Sono nuovo di reagire & reagire router dom v5, anche il mio inglese è pessimo. Vi ringrazio in anticipo per l'aiuto.

il mio problema: Ho 2 strade Principali nel mio App.js percorso

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;

il authcontainer avere 2 sub percorsi "/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);

quindi il mio publiccontainer sono 3 sub percorsi "/" "/prodotto" "/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

il mio carrello componente solo per il rendering, se isAuth è vero, il resto verrà reindirizzato a "/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

Il problema è, la sua, cercando di reindirizzare "/auth/signin" ma è ancora in "/" pagina enter image description here

Quando ho colpito ricaricare infine redirect a "/auth/signin"enter image description here

Come posso risolvere questo problema, ho davvero apprezzato il vostro aiuto

AGGIORNAMENTO

questa è la panoramica dei percorsi previsti enter image description here

Dal modo in cui penso che quando il mycart isAuth è falso quindi tenta di Collegamento a /auth/signin che provoca il link in alto url correttamente il punto di auth signin, ma dopo che si verifica la subroutes del publiccontainer invece di controllare la app.js percorsi enter image description here

Ma quando ho ricaricato, è possibile avviare una ricerca percorso corretto da app.js percorsi di ritorno atteso del percorso e della pagina, che è il segno di

enter image description here

1

Migliore risposta

0

Ho letto quasi simile di domanda in termini di solo il rendering, il percorso corretto quando colpisce aggiorna/ricarica

qui Reagire Router funziona solo dopo l'aggiornamento della pagina

Il problema era sto avvolgendo il sub percorsi con un nuovo router, così ho tentato di rimuovere il Router jsx che avvolge la Switch> & altri subroutes in entrambi i AuthContainer.js & PublicContainer.js

questo è l'aggiornamento 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);

E questo è il 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

Collegato a una delle mie risposte.
Drew Reese

@DrewReese Ringrazio Tanto! Dio vi benedica
TheNewBeeeee

In altre lingue

Questa pagina è in altre lingue

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