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
Quando eu bati recarregar finalmente redirecionar para "/auth/signin"
Como posso corrigir esse problema, eu realmente aprecio a sua ajuda
ATUALIZAÇÃO
esta é a síntese da minha rotas planeadas
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
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