React Router V4 - 경고 : 현재 사용중인 동일한 경로로 리디렉션하려고했습니다 : "/ home/dashboard"

Question

나는이 오류가 여전히 행운을 비게하는 다른 방법을 시도하고 있습니다.

나는 경로 설정 파일 즉 route.js이 App.js

내가 그렇게 항상 응용 프로그램을로드 최고 수준의 헤더와 sidenav해야에 넣어 원하는

class AppComp extends Component { 
    render() { 
     const {match} = this.props; 
     let navClass = 'active'; 

     if(this.props.sideClass === "nav-ssh") { 
      navClass = "active-ssh"; 
     } 

     return (
      <div> 
       <div className="container"> 
        <div className="main"> 
         <Route render={()=><Header sideNavClass={this.props.sideNavClass} />} /> 
         <Route render={()=><SideNav navActiveClass={navClass} currentLocation={this.props.location.pathname} />}/> 
         <Redirect to="/home/dashboard" />s 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

지금

const Root = ({ store }) => (
    <Provider store={store}> 
     <BrowserRouter> 
      <div> 
       <Route path='/' component={ App }/> 
      </div> 
     </BrowserRouter> 
    </Provider> 
) 

또한 항상로드되어 앱 내부에있게됩니다. 알 수없는 경로를 들어 내가/홈/대시 보드

로 리디렉션 처음으로 부하에 대한

는 나는/두 번 그래서이 경고에 오는해야 이해합니다.

동일한 방법으로 라우터를 구성하고 경고를 해결하려면 어떻게해야합니까?

도움을 주시면 감사하겠습니다.

Answer 1

나는 내가이 문제를 해결

class AppComp extends Component { 
    render() { 
     const {match} = this.props; 
     let navClass = 'active'; 

     if(this.props.sideClass === "nav-ssh") { 
      navClass = "active-ssh"; 
     } 

     return (
      <div> 
       <div className="container"> 
        <div className="main"> 
         <Route render={()=><Header sideNavClass={this.props.sideNavClass} />} /> 
         <Route render={()=><SideNav navActiveClass={navClass} currentLocation={this.props.location.pathname} />}/> 
         <Switch> 
          <Route path='/home/dashboard' component={ Dashboard }/> 

          <Redirect to='/home/dashboard'/> 
         </Switch> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

Answer 2

로

<Provider store={store}> 
    <BrowserRouter> 
     <div> 
      <Route path="/" component={ App }/> 
     </div> 
    </BrowserRouter> 
</Provider> 

및 App.js처럼 경로를 구성 할 것 같아요. 여기에 해결책이 있습니다. 체크 match.url를 추가 App.js에서

route.js

<Provider store={store}> 
     <BrowserRouter> 
      <div> 
       <Route path="/" component={ App }/> 
      </div> 
     </BrowserRouter> 
</Provider> 

은 === 그래서 '/'초기 렌더링을 위해 항상 true입니다 window.location.pathname는 '/ 홈/대시 보드로 리디렉션 '. 이 조건을 추가하면 리디렉션 경고가 해결됩니다.

class AppComp extends Component { 
    render() { 
     const {match} = this.props; 
     let shouldRedirect = match.url === window.location.pathname; 
     let navClass = 'active'; 

     if(this.props.sideClass === "nav-ssh") { 
      navClass = "active-ssh"; 
     } 

     return (
      <div> 
       <div className="container"> 
        <div className="main"> 
         <Route render={()=><Header sideNavClass={this.props.sideNavClass} />} /> 
         <Route render={()=><SideNav navActiveClass={navClass} currentLocation={this.props.location.pathname} />}/> 
         <Redirect to="/home/dashboard" />s 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

그러나 사용자가 다음 우리의 기본 노선 '/ 홈/대시 보드'즉로 리디렉션되지 않습니다 알 수없는 경로를 입력하면 당신은 이제 한계가있을 것이다.

<Switch> 
    ---- your additional routes goes here ----- 
    <Redirect to="/home/dashboard" /> 
</Switch> 

당신이 경로의 나머지 부분을 처리하는 곳에서 구성 요소 위의 코드를 추가

는 추가해야하는 한계를 극복합니다. 예를 들어 Sidenav 구성 요소를 추가했습니다.