react-router v4：以编程方式触发重定向（无需渲染 <Redirect />）

Posted 2023-02-21

【中文标题】react-router v4：以编程方式触发重定向（无需渲染 <Redirect />）

【英文标题】：react-router v4: triggering a redirect programmatically (without having to render a <Redirect / >)

【发布时间】：2017-11-15 21:43:18

【问题描述】：

我目前正在切换我的网络应用程序以做出反应。旧的位于here。

我要做的是：当用户在文本字段中输入玩家的用户名并提交时，应用程序将重定向到相应的路由（/:username），并且文本字段被清除。

在 react 版本中，这是我目前正在做的事情： https://github.com/AVAVT/g0tstats-react/blob/master/src/components/SideBar/SearchBox.js

submit(event)
    ...

    this.setState(
      redirect : true
    );

    ...

和

render()
    ...
    
          this.state.redirect && (
          <Redirect to=`/$this.state.username` push />
          )
    

哪种工作。但有两点我不喜欢它：

我正在渲染一个元素以进行重定向。感觉又蠢又迂回。将来会出现潜在的错误。 我卡在未清除的文本字段中。因为如果我将 state.username 设置为 null，<Redirect /> 组件将无法正确重定向。事实上，我无法精确控制重定向何时发生（除非我以另一种迂回方式进行）。

我已经寻找替代方案，但找不到。 withRouter 不起作用，因为 <SearchBox /> 不是 <Route /> 并且不接收历史道具。

那么我如何在 react-router v4 中说“现在将我重定向到那个地方”？

【问题讨论】：

从渲染你的<SearchBox />的组件发送路由道具怎么样？据推测，如果它不是获得道具的人，因为它没有直接被路由到，那么它被路由到的父级应该。

this.context.transitionTo(...) 是如果我正确阅读您的问题，您如何进行程序化重定向。

@promisified 其实不是，边栏里面的SearchBox，是<Route>s的兄弟

@1252748 如果您能向我展示一个工作示例，我将不胜感激。这几天我尝试了很多东西，包括this.context。

【参考方案1】：

这是一个示例，显示在使用withRouter HOC 时，即使没有路由到组件，路由道具也会被注入到组件中。

这是我的App.js

    class App extends Component 
      render() 
        return (
          <div className="App">
            <BrowserRouter>
              <div>
                <Route path='/test' component=Sample />
                <Sibling />
              </div>
            </BrowserRouter >
          </div>
        );
      
    

export default App;

这是我的Sample.js。这就像一个渲染孩子的示例容器。

export default class Sample extends React.Component 
    render() 
        return (
            <div>
                <span>this.props.location.pathname</span>
                <br />
                <Nested />
            </div>
        )
    

即使没有withRouter HOC，该组件也可以显示有关当前路由的信息，因为它正在被路由到。

这是我的Nested.js。

class Nested extends React.Component 
    render() 
        return (
            <div>
                <span>I am nested this.props.location.pathname</span>
            </div>
        )
    


export default withRouter(Nested);

我的嵌套组件需要withRouter HOC 才能显示当前路线。

最后是我的Sibling.js。 （这就像你的例子，<SearchBox /> 是兄弟姐妹。）

class Sibling extends React.Component 
    render() 
        return (
            <span>this.props.location.pathname</span>
        )
    


export default withRouter(Sibling);

这里只需要确保兄弟节点嵌套在路由器中，正如您在我的App.js 中看到的那样，然后使用withRouter HOC 它可以显示当前路径名。

澄清一下：如果一个组件可以访问当前路径名，那么它也可以通过这样做以编程方式更改路由。 this.props.history.push(some path)。

我希望这会有所帮助。

【讨论】：

谢谢你为我澄清了很多！

太棒了。乐于助人！

虽然我不是浏览器路由器专家，但我无法让this.context.transitionTo 工作。很多this.context.router is undefined。这是以编程方式切换页面的新方法吗？transitionTo 已被弃用。进去有点光...