Preact : How to get url params from one component to another

Question

I want to pass some info from one .tsx file to another (one view to another) by clicking a link. How can I achieve this in Preact.

Main.tsx

<Router onChange={(r) => setTitle(getTitle(r))}
                        routes={{
                            '/': <RouteComponent component={ContactForm} />,
                            '/faq/:user?': <RouteComponent component={Faq} />
                        }} />

ContactForm.tsx

<RouteLink href={`/faq/Jason`} > here</RouteLink>

Faq.tsx

const Faq = ({ user, ...props }) => {
    console.log(user);
    ...

My ContactForm.tsx is loading correctly but clicking on a link on that page, I believe, its not going to Faq.tsx. It takes me to Faq.tsx if I remove the query parameters but I need to pass the name 'Jason' from ContactForm.tsx to faq.tsx

Thanks

score 0 · Answer 1 · answered Aug 28 '21 at 00:33

0

This should be achievable with the current version of preact-router, which comes with Preact. It looks like you're using an older version, or at least a different structure to what's described here. Try following that example :)

answered Aug 28 '21 at 00:33

Nauraushaun

1,484
12
10

score -1 · Answer 2 · answered Aug 31 '20 at 14:57

-1

Yo ucan find the param on the routing params. Use this:

const { user } = useParams();

See here: https://reacttraining.com/blog/react-router-v5-1/

answered Aug 31 '20 at 14:57

Max

1,020
7
13

I tried to install "react-router-dom" module but it says : "cannot find module react". Here are my imports : import { h, Fragment } from 'preact'; import { useContext, useState, useEffect } from 'preact/hooks'; import { ServiceContext } from '../AppContext'; import clsx from 'clsx'; import { RouteLink } from '../layout/Router'; import { useTimeout } from '../hooks'; – amitava deb Sep 01 '20 at 04:53
This answer assumes you're using React, not Preact. It looks like you can use React Router with Preact, by aliasing it to "React" and installing preact-compat, but that's probably not the simplest answer. https://stackoverflow.com/questions/37306197/how-to-use-react-router-with-preact – Nauraushaun Aug 28 '21 at 00:30

Jinen Abdelhak · Answer 3 · 2020-08-31T21:27:29.280

-1

const user = this.props.match.params.user

edited Aug 31 '20 at 21:27

answered Aug 31 '20 at 14:59

Jinen Abdelhak

9
3

3

Please add some description also. – Kishan Bharda Sep 01 '20 at 04:43
This didnot help me. Nothing happens. – amitava deb Sep 01 '20 at 04:54

Preact : How to get url params from one component to another

3 Answers3