socket.io에서 React-Route 리디렉션

Question

서버에서 일부 정보를 수신 한 후 다른 경로로 리디렉션하려고하지만 할 수없는 것만 사용할 수있는 것으로 보입니다. 흐름은 경로를 검색하고 경로에 REDUX에 3. 클라이언트 저장소를 클라이언트로 4. 리디렉션을 경로를 보내 경로 2. 서버에 대한 요청이 1. 클라이언트 전송 소켓 메시지처럼 보이는

어떻게해야합니까?

Answer 1

여기에 react-router-dom을 사용하여 리디렉션 할 수있는 두 가지 방법이 있습니다.

는 여기 https://reacttraining.com/react-router/web/guides/philosophy

방법 1 반응 라우터의 문서에서 살펴 본다 제안 : 당신이 당신의 전체 응용 프로그램이 render를 사용하고 인수 예를 들어 소품을 통과 랩하는 구성 요소가있는 경우.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#render-func

//Wrapping component 
import {BrowserRouter as Router, Route} from 'react-router-dom' 
//Import your store ex: 
{store} from '/path/to/store' 

import Child from './components/child' 
import Navbar from './components/navbar' 
import Footer from './components/footer' 

class App extends React.Component { 

    render() { 
     return(
      <Provider store={store}> 
       <Router> 
        <div className="root"> 
         <Navbar /> 
         <Route exact path="/child" render={props => <Child {...props}/>} 
         //More routes..... 
         <Footer /> 
        </div> 
       </Router> 
      </Provider> 
     ) 

    } 
} 

//Child component 
class SomeComponent extends React.Component { 
    constructor(props) { 
     super(props) 
    } 

    componentDidMount() { 
     socket.on('redirect', url => { 
      //dispatch your action to update store then redirect 
      this.props.history.push(url) 
     }) 
    } 

    render() { 
     //some html 
    } 
} 

방법 2 : 스토어 매장에서 리디렉션 경로 및 null가 아닌 경우, 확인이 미들웨어를 사용할 수 있지만, 예를 들어 내가 안으로 문 경우 간단한을 사용합니다 구성 요소,이 방법을 사용하는 단점은 리디렉션 후에 작업을 전달해야한다는 것입니다 (그렇지 않은 경우 일부 리디렉션 문제가 발생할 수 있음). 따라서 리디렉션을 메서드 내에 래핑하고 다른 작업을 전달하는 것이 유용 할 수 있습니다 그것을 다시 null로 설정하십시오.

import {Redirect} from 'react-router-dom' 

class SomeComponent extends React.Component { 
    render() { 
     if(this.props.redirectPath) return <Redirect to={this.props.redirectPath} /> 
     else //Render your component 
    } 
}