Question

我有一个使用React的{{1}}应用程序。根据{{1}}的值，组件应显示不同的内容。

可能的URL search params可能如下所示：

search parameter v

URL发生http://localhost:3000/hello?v=12345更改后，我希望我的组件更新。

v query parameter

我正在使用我的App组件中的URL来根据路线显示不同的组件。 http://localhost:3000/hello?v=6789组件包含在react-router组件中。

App

如果用户点击某些内容并BrowserRouter更改，我希望该组件显示不同的内容。目前，render() { return ( <Switch> <Route path="/hello" component={Hello}></Route> <Route path="/" component={Home}></Route> </Switch> ); }确实发生了变化，但该组件不会再次渲染。有什么想法吗？

Answer 1

正如@forJ正确指出的那样，主要思想是在URL参数发生变化后重新渲染组件。我是这样实现的：

render() {
  return (
    <Switch>
      <Route path="/hello" render={() => (<Hello key={this.props.location.key}/>)}></Route>
      <Route path="/" component={Home}></Route>
    </Switch>
  );
}

每次this.props.location.key更改时

URL都会更改（如果查询参数更改，也会更改）。因此，如果您将其作为道具传递给组件，那么即使URL（base URL没有URL参数）没有URL param更改，组件也会重新呈现withRouter param更改没改变。

我还必须使用export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Hello));更高阶的组件才能使其正常工作。

void draw_line(cimg_library::CImg<uint8_t>& image,
    const int x1, const int y1,
    const int x2, const int y2,
    const uint8_t* const color,
    const unsigned int line_width)
{
    if (x1 == x2 && y1 == y2) {
        return;
    }
    // Convert line (p1, p2) to polygon (pa, pb, pc, pd)
    const double x_diff = std::abs(x1 - x2);
    const double y_diff = std::abs(y1 - y2);
    const double w_diff = line_width / 2.0;

    const int x_adj = y_diff * w_diff / std::sqrt(std::pow(x_diff, 2) + std::pow(y_diff, 2));
    const int y_adj = x_diff * w_diff / std::sqrt(std::pow(x_diff, 2) + std::pow(y_diff, 2));

    // Points are listed in clockwise order, starting from top-left
    cimg_library::CImg<int> points(4, 2);
    points(0, 0) = x1 - x_adj;
    points(0, 1) = y1 + y_adj;
    points(1, 0) = x1 + x_adj;
    points(1, 1) = y1 - y_adj;
    points(2, 0) = x2 + x_adj;
    points(2, 1) = y2 - y_adj;
    points(3, 0) = x2 - x_adj;
    points(3, 1) = y2 + y_adj;

    image.draw_polygon(points, color);
}

Answer 2

您没有提供足够的信息，因此我无法100％确定您出错的地方，但我现在可以在您的代码中看到1个问题。首先，您必须让路由器知道您将使用参数。例如，下面的代码

render() {
  return (
    <Switch>
      <Route path="/hello/:yourParam" component={Hello}></Route> // you need the colon here
      <Route path="/" component={Home}></Route>
    </Switch>
  );
}

以上将告诉路由可以从yourParam

访问名为URL的参数

然后必须在组件中访问它并以某种方式放入渲染函数（使用它从数据库中检索数据以呈现数据，直接渲染参数等）。

例如下面的

render(){
    <div>
        {this.props.match.params.yourParam}
    </div>
}

这样，每次进行参数更改时，您的组件都会重新渲染。

修改

由于您要使用查询而不是参数，因此您必须通过转发来检索它。 this.props.match.query.v。您仍然必须确保根据查询更改呈现变量

Answer 3

如果使用useEffect挂钩，请确保使用[props.match.params]而不是空数组[]

useEffect(() => {

        (async () => {
            // Fetch your data
        })();
    }, [props.match.params]) // <-- By this it will get called when URL changes

当然是课程组件this.props.match.params

React router：组件未在url上更新搜索参数更改

3 个答案: