Question

我有3个视图：信息流，播放列表和个人资料。每个视图都需要不同的按钮（略有不同），但是组件并不关心总体上的区别。他们继续正常检索和显示数据。

没有足够的区别来创建不同的组件，我只需要一个状态变量来更改按钮。

这是问题所在：获取状态变量的唯一方法是a。）在window.location.pathname中，或b。）在React路由器传递的props中，然后可以通过上下文api使用。一种解决方案比另一种更好吗？他们俩都对专业应用程序不正确吗？

Answer 1

根据URL中的内容更改单个组件没有任何问题。这是URL parameters的绝佳用例。

示例

function MyComponent(props) {
  const { params } = props.match;
  const { pathParameter } = params;

  if (pathParameter === "home") {
    return <div> Welcome to my home page </div>;
  } else if (pathParameter === "about") {
    return <div> This is the about me page </div>;
  } else {
    return <div> This is a third option </div>;
  }
}

function App() {
  return (
    <Router>
      <div>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/blog">Blog</Link>
        <Switch>
          <Route path="/:pathParameter" component={MyComponent} />
        </Switch>
      </div>
    </Router>
  );
}

根据URL设置状态是否是反模式？

1 个答案: