@team-devmonster/react-router

:warning: It's under development :warning: It's using nextjs

This is under devmonster's react & react-native union project.

This project is part of the react-module & react-native-module projects, that integrate react & react-native by the devmonster team. react-native => @team-devmonster/react-native-router General react-modules load map => here; General react-native-modules load map => here;

Other react modules

• [o] react-theme
• [o] react-tags

author: devmonster

We are always looking for investment or assistance. hompage: https://devmonster.co.kr email: [email protected]

items

• [o] [A] => Just tag a
• [ ] [Header]

Getting started

$ npm install @team-devmonster/react-router@latest

Examples

Easy. Too Easy.

import React from "react";
import { useTheme } from '@team-devmonster/react-theme';
import { Theme } from './App.theme';
import { Div, Button } from "@team-devmonster/react-tags";
import { A } from "@team-devmonster/react-router";

const RouterEx = () => {

  const { color } = useTheme<Theme>();

  return (
    <Div
      style={{
        backgroundColor: color.backgroundColor,
        flex: 1,
        padding: 18
      }}>
      <A href='/themeEx'>
        <Button color={color.primary} style={{ marginBottom: 8 }}>themeEx</Button>
      </A>
      <A href={{
        pathname: '/routerEx/paramEx',
        query: {
          name: 'soohong kim',
          nickname: 'aldegad',
          company: 'devmonster'
        }
      }}>
        <Button color={color.danger} style={{ marginBottom: 8 }}>paramEx</Button>
      </A>
      <A href='https://www.google.co.kr'>
        <Button color={color.warning}>google</Button>
      </A>
    </Div>
  )
}

export default RouterEx;

import React from "react";
import { useTheme } from '@team-devmonster/react-theme';
import { Theme } from "./App.theme";
import { Div, Button, P } from "@team-devmonster/react-tags";
import { A, useRouter } from "@team-devmonster/react-router";

const ParamEx = () => {

  const { color, fontSize, shadow, colorScheme } = useTheme<Theme>();
  const router = useRouter<{ name:string, nickname:string, company:string }>();
  const { query } = router;

  return (
    <Div
      style={{
        backgroundColor: color.backgroundColor,
        flex: 1,
        padding: 18
      }}>
      <P style={{ padding: 8, backgroundColor: color.step300 }}>
        { query.name } / { query.nickname } / { query.company }
      </P>
      <Button onClick={() => router.push({ pathname: 'https://www.google.co.kr', target: '_blank' })} color={color.primary}>push</Button>
      <A back={true}>
        <Button color={color.primary}>Back</Button>
      </A>
    </Div>
  )
}

export default ParamEx;