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:
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.