Getting url parameters from header component

Question

Codebox sample (add parameter to url manually like https://psolk.csb.app/mytoken): https://codesandbox.io/s/get-params-from-header-psolk

I have following url for my component: http://localhost:3000/CB602FCA-CEA6-41C2-9C70-0F578C92233E

My index.js:

ReactDOM.render(  
    <BrowserRouter>
      <App />
      <LoadingIndicator></LoadingIndicator>
    </BrowserRouter>
  ,
  document.getElementById("root")
);

This is my router:

const Main = () => (
  <div>
    <main>
      <Switch> 
        <Route path="/page1/:token?" component={Page1} />
        <Route path="/:token?" component={Home} />     
      </Switch>
    </main>
  </div>
);

In my home page I can easily get my token:

let { token } = useParams();

In my App Component I have the main content and a menu header:

const App = () => (
  <div>
    <Header />
    <Main />
  </div>
);

This is my Header:

const Header = () => {

  let { token } = useParams();
  console.log(token);

return (<div className="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
    <div className="navbar-left my-0 mr-md-auto">
      <img width="200" src={Logo} alt=""/>
    </div>
    <Nav className="my-2 my-md-0 mr-md-3">
      <Link to={"/"+token} className={"p-2 text-dark"}>
        Home
      </Link>
      <Link to={"/page1/"+token} className={"p-2 text-dark"}>
        About
      </Link>
    </Nav>
  </div>
)};

The problem is in my header I need to take the token from the url and apply it to the links, so when click a link in the header to token will be persisted between the pages. However the token is null in my Header component, how do I get the token from the url so I can add it to my links?

this might help. https://stackoverflow.com/questions/35352638/react-how-to-get-parameter-value-from-query-string — tcf01, May 13 '20 at 13:11
I think you forgot to ass the `Router` component around your App — Treycos, May 13 '20 at 13:15
@tsecheukfung01 I had been looking at that thread. And I can get the param but only in my component. There is one suggestion that was close to help and that was: let city = (new URLSearchParams(window.location.search)).get("city"). However I am not using ? but slash params. So it did not work. However I can see the full url in the windows.location. — Thomas Segato, May 13 '20 at 13:20
docs: " Use it to access match.params of the current ." - you need to duplicate route's in header — xadm, May 13 '20 at 13:25
xadm can you ellaborate on that? What do you mean by dublicate them in the header? — Thomas Segato, May 13 '20 at 13:27
If I add props to app to access match etc like: const App = (props) => { props are empty too:( — Thomas Segato, May 13 '20 at 13:29
I have added codebox sample. Add a token to the url and see the problem. See first line in main post. — Thomas Segato, May 13 '20 at 13:54

xadm · Accepted Answer · 2020-05-13T14:02:06.860

0

docs:

Use it to access match.params of the current <Route>.

... so you need to have a <Route/> above your <Header/>.

The simplest way to do this could be passing array of paths:

const RoutedHeader = () => <Route path={["/page1/:token?", "/:token?"]} component={Header} />

//export default Header;
export default RoutedHeader;

edited May 13 '20 at 14:02

answered May 13 '20 at 13:55

xadm

8,219
3
14
25

sorry, bad syntax, fixed – xadm May 13 '20 at 14:03
I tried that and replaced Header with RoutedHeader in my App. Same :( I added a code box sample to fiddle with. – Thomas Segato May 13 '20 at 14:10
no need to rename ... it works https://codesandbox.io/s/get-params-from-header-7qpcw .... params not available (and not needed ;) ) in `` for the same reason as in `
` - below any `Route` – xadm May 13 '20 at 14:31
Perfect. Thanks! – Thomas Segato May 13 '20 at 14:44
That is a really elegant solution, I just tested it. To summarize only thing you did was adding those two lines of code. It is really strange that you don't have to export Header or anything. So much magic going on. Is there any where I can read about this pattern? – Thomas Segato May 13 '20 at 14:53
`import Header from "./Header";` it imports anything exported default ... opposite to named exports and `import { Header }` – xadm May 13 '20 at 14:57

Getting url parameters from header component

1 Answers1