Skip to content

@vowel.to/client v0.3.3-beta


@vowel.to/client / index / createReactRouterAdapter

Function: createReactRouterAdapter()

ts
function createReactRouterAdapter(
   navigate, 
   location, 
   routes?): NavigationAdapter;

Defined in: lib/vowel/adapters/navigation/react-router-navigation-adapter.ts:209

Create a React Router adapter using navigation hooks This is a convenience function for quick setup

Parameters

ParameterTypeDescription
navigateReactRouterNavigateFunctionnavigate function from useNavigate() hook
locationReactRouterLocationlocation object from useLocation() hook
routes?VowelRoute[]Optional array of routes

Returns

NavigationAdapter

NavigationAdapter

Example

tsx
import { useNavigate, useLocation } from 'react-router-dom';
import { createReactRouterAdapter } from '@vowel.to/client/adapters/navigation';

function App() {
  const navigate = useNavigate();
  const location = useLocation();
  
  const navigationAdapter = useMemo(
    () => createReactRouterAdapter(navigate, location, [
      { path: '/', description: 'Home page' },
      { path: '/about', description: 'About page' },
      { path: '/products', description: 'Products listing' }
    ]),
    [navigate, location]
  );
  
  return <Vowel navigationAdapter={navigationAdapter} />;
}