Reagovat Router Dom, jak přesměrovat na Jiné App.js trasu, když jste v každém subRoute nějaké trasy [duplicitní]

0

Otázka

Jsem nový na to reagovat a reagovat router dom v5, také moje angličtina je špatná. Děkuji předem za pomoc.

můj problém: Mám 2 Hlavní Trasy v mém App.js trasu

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 dílčí trasy "/signin" "/registrace"

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

pak můj publiccontainer 3 dílčí trasy "/" "/produkt" "/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 součástí bude jen render, pokud isAuth je pravda, jinak to přesměruje 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

Problém je, jeho se snaží přesměrovat na "/auth/signin", ale je stále v "/" stránka enter image description here

Když jsem narazila reload konečně to přesměruje na "/auth/signin"enter image description here

Jak to mohu opravit tento problém, opravdu si vážím vaší pomoci

AKTUALIZACE

toto je přehled mé plánované trasy enter image description here

Mimochodem myslím, že když mycart isAuth je false, pak se snaží Odkaz /auth/signin, které způsobí, že odkaz v pravém url správně bod auth signin, ale poté, co že to jen kontroluje subroutes z publiccontainer místo kontrola app.js trasy enter image description here

Ale když jsem ji znovu, začít hledat správnou cestu z app.js trasy, které vrátí očekávané trasy a stránky, což je znamení v

enter image description here

1

Nejlepší odpověď

0

Přečetla jsem téměř podobnou otázku, pokud jde pouze o vykreslování správnou cestu, když udeří refresh/reload

tady Reagovat Router funguje pouze po aktualizaci stránky

Problém byl, že jsem obal sub trasy s nový router, tak jsem se pokusil odstranění Router jsx , že je balení Switch> a další subroutes v obou AuthContainer.js A 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

Souvisí s jedním z mých odpovědí.
Drew Reese

@DrewReese Děkuji Moc! Bůh vám žehnej
TheNewBeeeee

V jiných jazycích

Tato stránka je v jiných jazycích

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