在react router v4中更改URL而不使用重定向或链接[duplicate]

Question

我在我的react应用程序中使用react router v4和material ui。我想知道一旦点击GridList中的网格块，如何更改URL。

我最初的想法是使用onTouchTap的处理程序。然而，我能看到的重定向的唯一方法是使用组件重定向或链接。如何在不呈现这两个组件的情况下更改URL？

我尝试了this.context.router.push（'/foo'），但似乎不起作用。

Answer 1

反应路由器v4

有几件事我需要让它顺利运行。

auth工作流上的文档页面有很多需要的内容。

然而，我有三个问题

1. props.history从何而来？
2. 我如何通过它传递给我的组件，它不直接在路由组件
3. 如果我想要其他道具怎么办？

我最终使用了：

1. 选项2来自“使用react路由器以编程方式导航”的回答，即使用

注意：使用render方法，您必须明确地通过Route组件的道具。出于性能原因（component每次强制重新加载），您还希望使用render而不是component。

const App = (props) => (
    <Route 
        path="/home" 
        render={routeProps => <MyComponent {...props} {...routeProps}>}
    />
)

const MyComponent = (props) => (
    /**
     * @link https://reacttraining.com/react-router/web/example/auth-workflow
     * N.B. I use `props.history` instead of `history`
     */
    <button onClick={() => {
        fakeAuth.signout(() => props.history.push('/foo'))
    }}>Sign out</button>
)

我发现的一个令人困惑的事情是，在相当多的React路由器v4文档中，他们使用MyComponent=（{匹配}），即。对象破坏，这意味着最初我没有意识到路由传递了三个道具，匹配，位置和历史

我认为这里的其他一些答案是假设一切都是通过JavaScript类完成的。

这里有一个例子，另外，如果您不需要传递任何道具，您可以使用组件

class App extends React.Component {
    render () {
        <Route 
            path="/home" 
            component={MyComponent}
        />
    }
}

class MyComponent extends React.Component {
    render () {
        /**
         * @link https://reacttraining.com/react-router/web/example/auth-workflow
         * N.B. I use `props.history` instead of `history`
         */
        <button onClick={() => {
            this.fakeAuth.signout(() => this.props.history.push('/foo'))
        }}>Sign out</button>
    }
}

Answer 2

我用这个来重定向React路由器v4：

this.props.history.push('/foo');

Answer 3

试试这个，

this.props.router.push('/foo')

警告适用于v4之前的版本

和

this.props.history.push('/foo')

适用于v4及以上版本