socket.io 之后的 React-Route 重定向答案

【问题标题】：React-Route redirect after socket.iosocket.io 之后的 React-Route 重定向
【发布时间】：2018-05-27 13:47:07
【问题描述】：

在从服务器接收到一些信息后，我试图重定向到另一条路径，但似乎我只能在 inside 中使用，我无法做到这一点。流程看起来像这样 1. 客户端发送套接字消息请求路径 2.服务器查找路径，并将其发送回客户端 3.客户端将路径存入redux 4. 重定向到路径

我怎样才能做到这一点？

【问题讨论】：

包含一些您尝试过但不起作用的代码。

标签： javascript reactjs sockets redirect

【解决方案1】：

这里有两种方法可以使用 react-router-dom 进行重定向，这是一个示例。

我建议在这里查看 react-router 文档https://reacttraining.com/react-router/web/guides/philosophy

方法一： 如果您有一个包装整个应用程序的组件，请使用 render 并为其参数示例传递 props。

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
    }
}

方法二： 将重定向路径存入store，判断是否不为null，可以使用中间件，但在本例中我将在组件内部使用一个简单的if语句，使用这种方法的缺点是需要在重定向（如果不这样做，您可能会遇到一些重定向问题），因此将重定向包装在方法中并调度另一个操作将其设置回 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
    }
}

【讨论】：