javascript - react 路由器 v4 : triggering a redirect programmatically (without having to render a )

Question

我目前正在切换我的网络应用程序以使用react。旧的位于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 />
          )
    }
}

这有点工作。但有两点我不喜欢它:

1. 我正在渲染一个元素以便重定向。感觉很蠢很迂回。它散发着 future 潜在错误的味道。
2. 我被未清除的文本字段卡住了。因为如果我将 state.username 设置为 null <Redirect />组件将无法正确重定向。事实上，我无法精确控制重定向何时发生(除非我以另一种迂回方式进行)。

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

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

Answer 1

这是使用 withRouter 时显示的示例HOC，路由 props 被注入(inject)到组件中，即使它们没有被路由到。

这是我的 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 /> 是 sibling 。)

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

希望对您有所帮助。