Question

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

我怎样才能做到这一点？

Answer 1

以下是使用react-router-dom重定向的两种方法，以下是一个示例。

我建议在这里查看react-router docs 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： 将重定向路径存储在商店中，并检查是否为空，您可以使用中间件，但是对于此示例，我将在组件内部使用简单的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
    }
}

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

1 个答案: