Question

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

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

在反应版中，这就是我目前正在做的事情： 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中说“现在将我重定向到那个地方？”

Answer 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它可以显示当前路径名。< / p>

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

我希望这会有所帮助。

react-router v4：以编程方式触发重定向（无需呈现<redirect>）

1 个答案: