Reagovať Router Dom, ako presmerovať na Iné App.js trasy, keď sa nachádzate v ktorejkoľvek subRoute akejkoľvek trase [duplicitné]

0

Otázka

Som nový reagovať & reagovať router dom v5, aj moja angličtina je zlá. Ďakujem vopred za pomoc mi.

môj problém: Mám 2 Hlavné Cesty v mojom 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;

na authcontainer majú 2 sub cesty "/signin" "/prihlásenie"

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

potom môj publiccontainer mať 3 sub cesty "/" "/product" "/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

môj košík komponent bude vykresľovať iba ak isAuth je pravda, inak to bude presmerovanie "/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

Problém je, že jeho snažia presmerovať na "/auth/signin" ale to je ešte v "/" stránku enter image description here

Keď som narazila reload konečne presmerovanie "/auth/signin"enter image description here

Ako môžem opraviť tento problém, naozaj oceňujem vašu pomoc

AKTUALIZÁCIA

toto je prehľad mojej plánovanej trasy enter image description here

Mimochodom, myslím, že keď mycart isAuth je nepravdivé, potom sa to snaží Odkaz /auth/signin, ktorý spôsobuje odkaz v hornej url na správne miesto auth signin, ale potom to len kontroluje subroutes z publiccontainer namiesto kontrola app.js trasy enter image description here

Ale keď som sa načítať ho začne hľadať správnu trasu z app.js trasy, ktoré vrátiť očakávanej trasa a strana, ktorá je prihláste sa

enter image description here

1

Najlepšiu odpoveď

0

Čítal som takmer podobnú otázku z hľadiska iba vykresľovanie správnu cestu pri zasiahnutí obnoviť/reload

tu Reagovať Router funguje len po obnovení stránky

Problém bol som baliaci sub trasy s nový router, tak som sa snažil odstránenie Router jsx , že je balenie na Prepínanie> & iných subroutes v oboch AuthContainer.js & PublicContainer.js

toto je aktualizovaná 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);

A to je 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

Spojené s jednou z mojich odpovedí.
Drew Reese

@DrewReese Ďakujem Moc! Boh vám žehnaj
TheNewBeeeee

V iných jazykoch

Táto stránka je v iných jazykoch

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