반응 라우터 Dom 리디렉션하는 방법을 다른 App.js 경로에 있을 때 당신은 어떤 하위 배관의 어떤 경로를[중복]

0

질문

나는 새로운 반응을 시작 라우터 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;

이 authcontainer2 위로 "/로그인" "/회원 가입"

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

다음 내 publiccontainer3 위로 "/" "/"제품 "/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

my cart 구성 요소만을 렌더링하는 경우 isAuth 사실,다른 사람으로 리디렉션됩니다"/auth/로그인"

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/로그인"하지만 그것은 여전히"/"페이지 enter image description here

할 때 내가 다시 그것을 마지막으로 리디렉션"/auth/로그인"enter image description here

어떻게 하면 이 문제를 해결할 수 있는 문제,나는 당신의 도움이 정말 감사합

업데이트

이 개요 내 계획선 enter image description here

그런데 나는 생각 때 mycart isAuth 은 거짓 다음을 시도에 대한 링크를/auth/로그인 원인에서 링크를 위 url 을 올바르게 지점 auth 로그인,하지만 그 후에 그것을 검사 subroutes 의 publiccontainer 대신 확인 app.js 노선 enter image description here

그러나 때 나는 다시 그것은,그것을 검색을 시작하는 올바른 경로에서 app.js 로 반환하는 예상되는 경로 및 페이지에서 로그인

enter image description here

1

최고의 응답

0

내가 읽을 거의 비슷한 질문의 관점에서만의 렌더링이 올바른 경로 새로 고침을 타격/로드

여기에서 반응 라우터 작동한 후에만 페이지를 새로 고침

문제 난포장 하위 노선으로 새로운 라우터,래를 제거하려고 라우터 jsx 는 감싸 스위치>subroutes 에서 모두 AuthContainer.js & PublicContainer.js

이 업데이트 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);

이 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

중 하나에 연결된 나의 답변이 있습니다.
Drew Reese

@DrewReese 감사합니다! 하나님이 당신을 축복
TheNewBeeeee

다른 언어로

이 페이지는 다른 언어로되어 있습니다

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