markdown 反应路由器我的自定义导航练习

Posted 2021-05-05

# Navigation Practice

```jsx
import LoginForm from 'components/auth/LoginForm/index';
import WithAuth from 'components/auth/WithAuth/index';
import MyNavLink from 'components/navigation/MyNavLink';
import React from 'react';
import { Button } from 'reactstrap';
import { CreateCustomRoute } from 'utils/mylib/myRoute';
import { enhance } from './Container';

const url = "/login";

export const LinkOfLoginPageNavigation = (props) => {
    return <MyNavLink to={url} {...props}>
        계정
    </MyNavLink>
}

const TargetPageToRender = enhance(({ logout }) => (
    <WithAuth
        renderWhenNotLoggedIn={() =>
            <LoginForm />}
        renderWhenLoggedIn={() =>
            <Button size='sm' onClick={() => logout()}>로그아웃</Button>
        }
    />
))


export const RouteOfLoginPageNavigation = CreateCustomRoute({ path: url, TargetPageToRender });
```

# Simple Navigation Practice

```jsx
import MyNavLink from 'components/navigation/MyNavLink';
import React from 'react';

const url = "/home";

export const HomeNav = (props) => {
    return <MyNavLink {...props} to={url}>홈</MyNavLink>
}

export const HomeRoute = () => (
    <Route
        exact path={url}
        render={(props) => <Home {...props} propFromApp={'test props'} />}
    />
)
```

# Passing props to Route ? 

```jsx
<Route
    exact path={url}
    render={(props) => <Home {...props} propFromApp={'test props'} />}
/>
```

# Passing data 1
```js
const URL = "/rites-by-person";

export const PersonalRitesNav = (props) => {
\!h  const { personId } = props
  return <NavLink {...props} state={{personId}} to={URL}>개인재</NavLink>
}

const TargetPageToRender = (props) => {
\!h  const _getStateIfExists = (props) => props.location ? (props.location.state ? props.location.state : null) : null
\!h  const { personId } = _getStateIfExists(props)
  return (<PersonalRitesQuery {...props} personId={personId} />)
}

export const PersonalRitesRoute = createCustomRoute({ path: URL, TargetPageToRender });
```

usage
```jsx
<PersonalRitesNav personId={person.id} />
```

# Passing data 2

```jsx
const BASE_URL = '/product-detail';
\!h const ROUTER_URL = BASE_URL + `/:id`;

export const ProductNav = (props) => (
\!h     <MyNavLink {...props} to={BASE_URL + `/${props.productId}`}>{props.children}</MyNavLink>
)

const TargetPageToRender = (props) => {
\!h  const { match: { params: { id } } } = props;
  return (<ProductPage {...props} id={id} />)
}
export const ProductRoute = createCustomRoute({ path: ROUTER_URL, TargetPageToRender });
```
> line 9 needed to be refined (return null when params not exists like the `Passing data 1`)