ตอบโต้ Router Dom ยังไงเพื่อเปลี่ยนปลายทางจดหมายไปอีก App.js เส้นทางตอนที่คุณอยู่ที่ไหน subRoute ของเส้นทาง[ที่ซ้ำกัน]

ฉันยังใหม่ที่จะทำอย่าง&ตอบโต้ router dom v5 เหมือนกันของฉันภาษาอังกฤษแย่แน่ๆ ขอบคุณล่วงหน้าสำหรับช่วยเหลือชั้นนะคะ.

ปัญหาของฉัน: ฉันมี 2 หลักเส้นทางในของฉัน App.js เส้นทาง

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;

ที่ authcontainer มี 2 ย่อยเส้นทาง "/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);

งั้นคนของฉัน publiccontainer มี 3 ย่อยเส้นทาง "/" "/ผลิตภัณฑ์" "/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

คนของฉันถเข็นส่วนประกอบเดียวที่จะจัดการพาถ้า isAuth เป็นความจริงอื่นที่มันจะเปลี่ยนปลายทางจดหมายไป"/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

ปัญหาคือมันพยายามจะเปลี่ยนปลายทางจดหมายที่"/auth/signin"แต่มันยังอยู่ที่"/"หน้า

ตอนที่ฉันโดนเรียกมันใหม่ในที่สุดก็เปลี่ยนปลายทางจดหมายไป"/auth/signin"

แล้วฉันจะแก้ตัวได้ยังปัญหาฉันขอบคุณมากสำหรับคุณช่วย

ปรับปรุง

นี่เป็นแค่จุดเริ่มต้นของสิ่งของฉันวางแผนเส้นทาง

โดยอย่างที่ฉันคิดว่าเมื่อตอนที่ mycart isAuth คือปลอมงั้นมันพยายามเชื่อมโยงไปยัง/auth/signin ซึ่งทำให้การเชื่อมต่ออยู่ด้านบนสุดที่อยู่ url ที่ถูกต้องจุดที่ auth signin แต่หลังจากนั้นมันเพียงรวจค subroutes ของ publiccontainer แทนการตรวจสอบที่ app.js เส้นทาง

แต่ตอนที่ฉันเรียกมันใหม่มันเริ่มค้นหาเส้นทางที่ถูกต้องจาก app.js เส้นทางซึ่งตอบกลับคาดหวังเส้นทาง&หน้านั่นคือป้ายใน