如何在 React Hook 路由器中通过 useRoutes 传递道具？

Question

我是 React 和 React Hooks 的新手。我正在为我的一个项目使用 react-hooks。我正在使用 hookrouter 包，我试图用谷歌搜索这个问题，但没有找到太多帮助。

我想要什么？

我正在尝试通过 react 中的钩子路由传递道具。例如, 我想通过 useRoutes(routes).

传递对象

如有任何帮助，我们将不胜感激。提前致谢！

Answer 1

我一直在做类似的事情：

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;

Answer 2

首先：

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;

然后：

App/index.js

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

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

有关更多信息，请阅读此处 - https://blog.logrocket.com/how-react-hooks-can-replace-react-router/

Answer 3

实际上，我很困惑，正在考虑通过 useRoutes 传递 props 而不是在 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 />;
}

如何在 React Hook 路由器中通过 useRoutes 传递道具？

How to pass props through useRoutes in react hook router?

reactjs

hookrouter