在不使用重定向或 Link 的情况下更改 react-router v4 中的 URL

Question

我正在使用 react-router v4 and material-ui in my React app. I was wondering how to change the URL once there is a click on a GridTile within GridList。

我最初的想法是为 onTouchTap 使用处理程序。但是，我能看到重定向的唯一方法是使用组件 Redirect 或 Link。如何在不渲染这两个组件的情况下更改 URL？

我试过了this.context.router.push('/foo')，但好像不行。

Answer 1

试试这个，

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

警告适用于 v4

之前的版本

和

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

对于 v4 及更高版本

Answer 2

我正在使用它通过 React Router v4 进行重定向：

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

Answer 3

React Router v4

我需要做一些事情才能顺利进行。

auth workflow 上的文档页面有很多需要的内容。

但是我遇到了三个问题

props.history 从哪里来？
如何将它传递到不直接在 Route 组件内的组件
如果我想要其他 props 怎么办？

我最终使用了：

来自 - i.e. to use <Route render> 的选项 2 让你 props.history 然后可以传递给 children.
使用 render={routeProps => <MyComponent {...props} {routeProps} />} 组合来自

props

N.B。使用 render 方法，您必须显式地传递 Route 组件中的道具。出于性能原因，您还想使用 render 而不是 component（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 Router v4 文档中，他们使用 MyComponent = ({ match }) 即 Object destructuring，这意味着最初我没有意识到 Route 传下三个 props，match、location 和 history

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

这是一个例子，另外如果你不需要通过任何 props 你可以只使用 component

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 4

这就是我做类似事情的方式。我的磁贴是 YouTube 视频的缩略图。当我单击磁贴时，它会将我重定向到 'player' 页面，该页面使用 'video_id' 将正确的视频呈现到该页面。

<GridTile
  key={video_id}
  title={video_title}
  containerElement={<Link to={`/player/${video_id}`}/>}
 >

ETA：抱歉，刚刚注意到您出于某种原因不想使用 LINK 或 REDIRECT 组件。也许我的回答在某种程度上仍然有帮助。 ; )

在不使用重定向或 Link 的情况下更改 react-router v4 中的 URL

Changing the URL in react-router v4 without using Redirect or Link

javascript

react-router

material-ui

react-router-v4