Как отобразить другое сообщение на основе текущего URL / фрагмента URL

Question

Здесь я возвращаю текущую реакцию на дом:

  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 является родственником, и контекст реактивного маршрутизатора не будет настроен на использование хуков маршрутизатора.