在不使用重定向或链接的情况下更改 react-router v4 中的 URL [重复]

Posted 2023-02-21

【中文标题】在不使用重定向或链接的情况下更改 react-router v4 中的 URL [重复]

【英文标题】：Changing the URL in react-router v4 without using Redirect or Link [duplicate]

【发布时间】：2017-07-05 10:36:21

【问题描述】：

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

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

我试过this.context.router.push('/foo')，但它似乎不起作用。

【参考方案1】：

试试这个，

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

警告适用于 v4 之前的版本

和

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

适用于 v4 及更高版本

【讨论】：

@Alex 该方法现在作为道具而不是通过上下文传递。但是我在生产中仍然遇到多个问题

所以这意味着我需要自己将路由器对象传递给子组件，对吧？

不，路由器已经存在，无需通过

相信你一定要通过道具。例如<Route path="/one" render=() => <MyComponent />/>。如果我尝试访问MyComponent 中的道具，我不相信props.router 会存在。 props 不是一个全局变量，你不能随便往里面注入东西。

注： 这是针对旧版本的 React Router（当前版本是 v4）

【参考方案2】：

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

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

【讨论】：

注：从router 到history 的细微变化。这就是我最终用于 v4 的内容

@AbhirajshriWinsome 自从我回答以来，我的编辑次数并不多。我的一直有history，Ayush Sharma 的回答没有。

【参考方案3】：

React 路由器 v4

我需要做几件事才能顺利完成这项工作。

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

但是我遇到了三个问题

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

我最终使用了：

an answer on 'Programmatically navigate using react router' 中的选项 2 - 即使用 <Route render> 得到 props.history，然后可以将其传递给孩子。 使用render=routeProps => <MyComponent ...props routeProps /> 组合来自this answer on 'react-router - pass props to handler component' 的其他props

注意使用 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 传递了三个道具，@ 987654341@、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>
    

【讨论】：

如果我想追加到当前 URL 怎么办？就像当前 URL 是 google.com/:search，那么我想将其设为 google.com/:search/vendor... 或其他什么。

【参考方案4】：

这就是我做类似事情的方式。我有作为 YouTube 视频缩略图的图块。当我单击磁贴时，它会将我重定向到使用“video_id”将正确视频呈现到页面的“播放器”页面。

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

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