Odpowiedz routera Dom, jak przekierować na inne App.js trasa, gdy jesteś w każdym podprogramie każdego trasy [duplikat]

0

Pytanie

Jestem nowy w react & react router dom v5, także mój angielski jest kiepski. Z góry dziękuję za pomoc.

mój problem: Mam 2 główne trasy w moim App.js trasa

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;

u автоконтейнера 2 подмаршрута "/podpis "/rejestracja"

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

wtedy u mojego publicznej towarzyszącej jest 3 подмаршрута "/" "/produkt" "/микарт"

/* 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

komponent " mój koszyk "będzie wyświetlany tylko w przypadku, gdy wartość isAuth true, w przeciwnym razie перенаправится na"/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

Problem w tym, że on próbuje przekierować na "/auth/signin", ale wciąż znajduje się na stronie "/" enter image description here

Gdy nacisnę ponownie, w końcu перенаправится na "/auth/login".enter image description here

Jak mogę rozwiązać ten problem, naprawdę doceniam twoją pomoc

Zaktualizować

jest to przegląd moich zaplanowanych tras enter image description here

Przy okazji, myślę, że gdy mycart isAuth ma wartość false, próbuje przejść pod adres /auth/signin, co prowadzi do tego, że link w górnym adresie URL prawidłowo wskazuje na autoryzację, ale po to on sprawdza tylko procedury publiccontainer zamiast sprawdzania app.js trasy enter image description here

Ale kiedy restartuję go, zaczyna szukać właściwą trasę app.js trasy, które zwracają przewidywana trasa i stronę, która jest wejściem

enter image description here

1

Najlepsza odpowiedź

0

Przeczytałem prawie podobne pytanie z punktu widzenia prawidłowego wyświetlania drodze tylko po naciśnięciu przycisku odśwież/uruchom ponownie

tutaj router React działa dopiero po odświeżeniu strony

Problem polegał na tym, że ja обертываю подмаршруты nowym routerem, więc próbowałem usunąć jsx routera, który обертывает centralka>> i inne procedury w obu AuthContainer.js & PublicContainer.js

jest to zaktualizowana 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 to jest to, co 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

Wiąże się z jednym z moich odpowiedzi.
Drew Reese

@DrewReese Bardzo Ci Dziękuję! Niech was Bóg błogosławi
TheNewBeeeee

W innych językach

Ta strona jest w innych językach

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