simple-react-router-stack

Simple React Router

Make simple navigation to add basic navigation in React application.

Example

Defining in root application file routers.

function App() {
  return (
    <NavigatorProvider
      onScreenChange={(...args) => {
        console.log(args);
      }}
      fallbackRouteName="main"
    >
      <NavigatorScreen
        name="home"
        component={Home}
        props={{
          internalName: "HomeScreen",
        }}
      />
      <NavigatorScreen name="main" component={Main} />
    </NavigatorProvider>
  );
}

PropName	Description	Return value
onScreenChange	If you need to be updated on change in navigation.	{currScreenName: string; prevScreenName: string; }
fallbackRouteName	Initial screen. Default the first screen in stack declaration.

Need to navigate.

function Main() {
  const { goNextTo } = useContext(NavigatorContext);

  return (
    <div>
      <div>Main</div>
      <button
        onClick={() => {
          goNextTo("home");
        }}
      >
        Redirect
      </button>
    </div>
  );
}

PropName	Description	Return value
goNextTo	Navigate to router by passing name
goBack	Navigate back. Default nothing happens if no previous in stack
reset	Navigate on first router in stack

Demo