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

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

6 голосов
/ 27 февраля 2020

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

  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, а затем жестко закодировать ключ к другому сообщению, но это кажется ненужным.

Ответы [ 2 ]

3 голосов
/ 03 марта 2020

Вы передаете историю браузера маршрутизатору. Почему бы вам не передать то же самое компоненту Snackbar? В историческом объекте будут URL и местоположение. Их можно использовать внутри Снэк-бара и отображать сообщение по мере необходимости. Например:

Приложение 

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

3 голосов
/ 03 марта 2020

Вы можете использовать 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> }
  </>);
}
...