How to pass props through useRoutes in react hook router?

Question

I'm new to react and react hooks. I'm using react-hooks for one of my project. I'm using hookrouter package and I tried to googling about the question, but didn't find much help.

What I want?

I'm trying to pass props through hook routes in react. e.g. , I want to pass object through useRoutes(routes).

Any help will be appreciated. Thanks in advance!

I got the answer. You can pass the props to the desired component inside the router.js file. — Dhruvil21_04, Nov 18 '19 at 14:51

score 2 · Answer 1 · answered Oct 02 '19 at 08:33

Firstly:

router.js

import React from "react";
import Users from "./components/Users";
import Contact from "./components/Contact";
import About from "./components/About";
const routes = {
  "/": () => <Users />,
  "/about": () => <About />,
  "/contact": () => <Contact />
};
export default routes;

then:

App/index.js

import {useRoutes} from 'hookrouter';
import Routes from './router'

function App() {
  const routeResult = useRoutes(Routes)
  return routeResult
}

For more information please read here - https://blog.logrocket.com/how-react-hooks-can-replace-react-router/

score 1 · Accepted Answer · answered Apr 29 '20 at 15:17

Actually, I was confused and was thinking of passing props through useRoutes instead of Components individually inside routes. Doc

const routes = {
    '/': () => <HomePage />,
    '/about': () => <AboutPage props={yourProps} />,
    '/products': () => <ProductOverview props={yourProps} />,
    '/products/:id': ({id}) => <ProductDetails id={id} />
};

const MyApp = () => {
    const routeResult = useRoutes(routes);

    return routeResult || <NotFoundPage />;
}

score 0 · Answer 3 · answered Sep 13 '19 at 08:29

I have been doing something like that:

RoutePropsContext.js

import React from 'react';

const RoutePropsContext = React.createContext(null);

export default RoutePropsContext;

index.js

import React from 'react';
import { BrowserRouter as Router} from 'react-router-dom';

ReactDOM.render(
  <Router>
    <App/>
  </Router>

  ,document.getElementById('root')
);

App.js

import React from 'react';
import {withRouter} from 'react-router-dom';
import RoutePropsContext from '@helpers/context/RoutePropsContext';

function App(props) {

  const routeProps = {
    match: props.match,
    location: props.location,
    history: props.history
  };

  return(
    <RoutePropsContext.Provider value={routeProps}>
      <YourApp/>
    </RoutePropsContext.Provider>
  );

}

export default withRouter(App);

useRouteProps.js

import {useContext} from 'react';
import RoutePropsContext from '../context/RoutePropsContext';

function useRouteProps() {
  const routeProps = useContext(RoutePropsContext);
  return ({
    ...routeProps
  });
}

export default useRouteProps;

Component_Using_the_Hook.js

import React from 'react';
import useRouteProps from './hooks/useRouteProps';

function SomeComponent() {
  const {match, location, history} = useRouteProps();

  return(
    <Something/>
  );
}

export default SomeComponent;

How to pass props through useRoutes in react hook router?

3 Answers3