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

我正在我的React应用程序中使用和。我想知道，一旦点击

网格块

，如何更改URL

我最初的想法是使用

onTouchTap

的处理程序。但是，我能看到重定向的唯一方法是使用组件

重定向

或

链接

。如何在不呈现这两个组件的情况下更改URL

我尝试了

这个.context.router.push（'/foo'）

，但似乎不起作用。

试试这个

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

警告适用于v4之前的版本

及

---

对于v4及以上版本

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

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

希望它对你有用；）

React路由器v4

为了让这一切顺利进行，我需要做几件事

上的doc页面有很多需要的内容

然而，我有三个问题

props.history

从何而来

如何将其传递到不直接位于

路由中的组件

组件

如果我想要其他

道具怎么办

我最终使用了：

选项2 from-即使用它获得道具历史记录，然后可以传递给孩子们

使用

render={routeProps=>}

组合来自的其他

道具

注意：使用

render

方法，您必须明确地通过

Route

组件的道具。出于性能原因（

component

每次强制重新加载），您还希望使用

render

而不是

component

---

我就是这样做的。我有YouTube视频的缩略图。当我单击互动程序时，它会将我重定向到一个“播放器”页面，该页面使用“视频id”将正确的视频呈现到该页面

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

---

ETA：抱歉，刚才注意到您出于某种原因不想使用链接或重定向组件。也许我的回答在某种程度上仍有帮助

@Alex该方法现在通过上下文作为道具传递。但是我在生产过程中仍然有很多问题，这意味着我需要将路由器对象传递给子组件，对吗？不，路由器已经在那里了，不需要传递我相信你必须传递道具。e、 g.

}/>

。如果我试图访问

MyComponent

中的道具，我不相信

props.router

会存在<代码>道具不是一个全局变量，你不能只是把东西注入其中。这是针对React Router的旧版本（当前版本为v4）的。注意：从

路由器

到

历史

的细微变化。这就是我在最后使用的V4，如果我想附加到当前URL怎么办？比如，如果当前URL是

google.com/：search

，那么我想让它成为

google.com/：search/vendor

。。。或者别的什么。

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

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

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