Reacționează Router Dom cum pentru a redirecționa la Alte App.js traseu atunci când sunt în orice subRoute de orice rută [duplicat]

0

Problema

Sunt nou să reacționeze și să reacționeze router dom v5, de asemenea, engleza mea e de rău. Va multumesc anticipat pentru ajutor.

problema mea: Am 2 Principalele Rute în App.js traseu

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;

la authcontainer au 2 sub rute "/semnez" "/inregistreaza-te"

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

apoi mi publiccontainer au 3 sub rute "/" "/produs" "/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

în coșul meu componentă va face doar dacă isAuth este adevărat, altfel se va redirecționa către "/auth/semnez"

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

Problema este, ei încearcă să redirecționeze la "/auth/semnez", dar este încă în "/" pagina enter image description here

Când m-am lovit reîncărcați-o în cele din urmă de redirecționare a "/auth/semnez"enter image description here

Cum pot rezolva aceasta problema, apreciez ajutorul tau

UPDATE

aceasta este o imagine de ansamblu a mea rute planificate enter image description here

Apropo, cred că atunci când mycart isAuth este false atunci încearcă să Link-ul de la /auth/semnez care provoacă link-ul în partea de sus url-ul pentru a indica în mod corect pentru auth semnez, dar după aceea se verifică numai subroutes de publiccontainer în loc de verificarea app.js rute enter image description here

Dar când am reincarca, se începe căutarea traseul corect din app.js rutele care reveni așteptat traseu & page care este semnul în

enter image description here

1

Cel mai bun răspuns

0

Am citit-o aproape întrebare similară în termeni de numai redare calea corectă atunci când dai refresh/reload

aici Reacționa Router-ul funcționează numai după un refresh al paginii

Problema a fost că am împachetat sub rute cu un router nou, așa că am încercat eliminarea Router jsx în care este împachetat în care Întrerupătorul> & alte subroutes în ambele AuthContainer.js & PublicContainer.js

acesta este actualizat 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);

Și acest lucru este 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

Legat de unul dintre răspunsurile mele.
Drew Reese

@DrewReese Vă Mulțumesc Atât De Mult! Dumnezeu să vă binecuvânteze
TheNewBeeeee

În alte limbi

Această pagină este în alte limbi

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