React Router - skąd wziąć parametry

React Router - skąd wziąć parametry
DO
  • Rejestracja:prawie 7 lat
  • Ostatnio:ponad rok
  • Postów:165
0

Napisze na początku; o ile jakoś kumam Reacta i Reduxa to nie Routera właściwe na odwrót. Stąd pytanie możecie uznać za dziwne albo głupie.

1.Mam apkę, która wyświetla pogodę w różnych miejscach (miejsce idzie z inputa).
2. Chodzi o to, żeby dane wyświetlać na stronie, która bedzie miała link postaci http://localhost:3000/pogodynka/Warszawa

I ogólnie chodzi o sposób na wygenerowanie takiego linku

W tej chwili to działa tak:

Kopiuj
const App = () => {
  const [path, setPath] = useState("/city");
  
  const getPath = (value) => {
    setPath(value);
  }; 
  return (
   
    <Router basename={process.env.PUBLIC_URL}>
      <Switch>
        <Route exact path={ROUTES.LANDING}>
          <LandingPage />
        </Route>
        <Route path={ROUTES.SEARCH}>
          <SearchSection getPath={getPath} />
        </Route>
        <Route path = {path} component ={Awaiting(CollectedWeatherInfos)} />
        <Route path={ROUTES.ERROR} component ={Awaiting(ErrorMessage)} />
      </Switch>
    </Router>
  );
};
export default App;


App jest najwyższym komponentem (znaczy jest jeszcze <Provider> w pliku index.js), ma własny stan z ciągiem, który reprezentuje lokalizację. I callbacka, którego przesyła w dół drzewa komponentów aż do miejsca, gdzie tworzony jest adres.
Moim zdaniem te rozwiązanie, choć działa, jest totalnie bez sensu. Jednak próbowałam wywołać useHistory, uselocation, useParams, w tym komponencie i guzik.
useHistory jest cały czas undefined, pozostałe rzucają błąd. Właściwie, biorąc pod uwagę, że jest to poza zakresem Routera, mnie to nie dziwi.
Pytanie w takim razie jak dostać lokalizacje w tym miejscu. Czy jest to możliwe bez dodatkowych bibliotek/ Wolałabym nie mieszać Routera z Reduxem przynajmniej część źródeł tego nie poleca.

PH
  • Rejestracja:ponad 5 lat
  • Ostatnio:około rok
  • Postów:374
0

router jest już wbudwany, i z niego korzystasz jak używasz route. Te hooki muszą działać, poszytaj o nich. Jeśli są undefined to znaczy że są poza <Router />. Dostęp do nich jest w każdym komponencie dziecku

mariano901229
  • Rejestracja:ponad 10 lat
  • Ostatnio:8 miesięcy
  • Postów:597
0

W mojej opini trochę źle to robisz. Logika generowania linku powinna być albo zamknięta w komponencie SearchSection w którym powinien być użyty właśnie History (undefined musi powodować błąd w kodzie) albo jak chcesz rozbijać to w jakimś innym komponencie-serwisie. W routingu wtedy masz tylko takie coś (oczywiscie to nie musi być id):

Kopiuj
<Route path = "/pogodynka/:id" component ={Awaiting(CollectedWeatherInfos)} />
edytowany 1x, ostatnio: mariano901229

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.