如何根据当前 url / url 片段呈现不同的消息

Question

我在这里返回当前的反应dom东西：

  return (
    <React.Fragment>
      {inProduction ? null : <CP.Dev/>}
      <CP.Snackbar
        {...p as any}
      />
      <Router history={browserHistory}>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/signup" component={Signup} />
           {authRoutes}
        </Switch>
      </Router>
    </React.Fragment>
  );

所以..Snackbar 组件为每条路线呈现 - 目标：我想做的是根据 url 呈现不同的欢迎消息 - 最好的方法是什么？我如何监听 url 变化，然后根据 url 呈现不同的消息？

或者，我可以用 Snackbar 包装每个组件，然后将密钥硬编码到不同的消息，但这似乎没有必要。

Answer 1

您可以使用 react-router-dom history 了解 URL 的变化。这是一个例子：

import React from "react";
import { useHistory } from "react-router-dom";

const App = () => {
  const history = useHistory();

  return (<>
     { history.location.pathname === "/" ? <div>Home</div> : <div>Other Component</div> }
  </>);
}

Answer 2

您正在将浏览器历史记录传递给路由器。为什么不将其传递给 Snackbar 组件？历史对象中将有 url 和位置，这些可以在 Snackbar 内部使用并根据需要呈现消息。例如：

应用程序

import React from "react";

const App = () => (
    <React.Fragment>
      {inProduction ? null : <CP.Dev/>}
      <Snackbar
        {...p as any}
        history={browserHistory}
      />
      <Router history={browserHistory}>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/signup" component={Signup} />
           {authRoutes}
        </Switch>
      </Router>
    </React.Fragment>
  );

小吃店

const SnackBar = ({history, ...props}) => {
// const message = `Current location is ${history.location.url}`;
// Format and use the message as needed
 return (
  <>
   <CP.Snackbar
        {...props}
    />
  </>
 );
}

PS：如果你想访问Router的任何子组件内部的位置，我建议使用useLocation钩子。但在这种情况下，Snackbar 是一个兄弟，并且 react-router 上下文不会被设置为使用路由器挂钩。

如何根据当前 url / url 片段呈现不同的消息

How to render different message based on current url / url fragment

reactjs

react-router

react-fragment

应用程序

小吃店