Reagir Roteador Dom como redirecionar para Outro App.js rota quando você estiver em qualquer subRoute de qualquer rota [duplicado]

0

Pergunta

Eu sou novo para reagir & reagir roteador dom v5, também o meu inglês é ruim. Muito obrigado por me ajudar.

meu problema: Eu tenho 2 Principais Rotas no meu App.js percurso

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;

o authcontainer tem 2 sub rotas "/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);

em seguida, o meu publiccontainer tem 3 sub-rotas "/" "/produtos" "/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

meu carrinho de componente irá apenas fazer se isAuth é verdadeiro, então ele irá redirecionar para "/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

O problema é que, a tentar redirecionar para "/auth/signin" mas ele ainda está no "/" página enter image description here

Quando eu bati recarregar finalmente redirecionar para "/auth/signin"enter image description here

Como posso corrigir esse problema, eu realmente aprecio a sua ajuda

ATUALIZAÇÃO

esta é a síntese da minha rotas planeadas enter image description here

Pelo jeito eu acho que quando a mycart isAuth é falso, então ele tenta ligar a /auth/signin que faz com que o link no topo url para apontar corretamente para autenticação de entrar, mas depois que ele apenas verifica o subroutes do publiccontainer em vez de verificar o app.js rotas enter image description here

Mas quando eu voltar a carregá-lo, começa a procurar o caminho correcto a partir do app.js rotas de retorno esperado rota & page que é o sinal em

enter image description here

1

Melhor resposta

0

Eu li quase pergunta semelhante em termos de renderização somente o caminho correto quando clicar em " atualizar/recarregar

aqui Reagir Roteador só funciona depois de actualizar a página

O problema foi que eu estou envolvendo o sub-rotas com um novo roteador, então, eu tentei remover o Roteador jsx que envolve o Switch> & outros subroutes em ambos os AuthContainer.js & PublicContainer.js

esta é atualizado 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 este é o 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

Vinculada a uma das minhas respostas.
Drew Reese

@DrewReese Muito Obrigado! Deus abençoe você
TheNewBeeeee

Em outros idiomas

Esta página está em outros idiomas

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