지난 기사에서는 기본Drawer을 구축했으며 이 기사의 끝에서 전체 작동 탐색 블록을 포함하게 됩니다.

React 라우터 DOM 설치

football-almanac 의 루트 폴더에서 실행합니다.

npm install react-router-dom @types/react-router-dom

React Router DOM이 설치됩니다.

내비게이션 디자인

이와 같은 애플리케이션에 대해 염두에 두는 처음 세 개의 URL은 다음과 같습니다.

/(홈페이지)

/standings

/teams

React 라우터 DOM 구현

모든 것을 포장하십시오!

시작하려면 BrowserRouter에서 index.tsx를 가져오고 그 안에 전체 응용 프로그램을 래핑합니다.

......
import { BrowserRouter } from 'react-router-dom';
......
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

이 시점에서 App 구성 요소가 너무 커질 것이므로 여러 구성 요소로 분할합니다. 이것은 테스트 목적으로도 좋은 수준의 격리를 보장하는 데 도움이 될 것입니다.

라우터 객체

내 경로를 이와 같은 개체로 정의하는 데 매우 유용합니다.

const Routes = [
  {
    path: [url],
    sidebarName: [label],
    icon: [material_ui_icon_name],
    component: [component_name],
  },
  ...
];

이런 식으로 라우터를 한 번 정의하고 필요할 때 모듈로 재사용할 수 있습니다.
Routes.tsx에 내 경로를 정의합니다.

import React from 'react';

const Home: React.FC = () => {
  return (
    <h1>Home</h1>
  );
};

const Standings: React.FC = () => {
  return (
    <h1>Standings</h1>
  );
};

const Teams: React.FC = () => {
  return (
    <h1>Teams</h1>
  );
};

const Routes = [
  {
    path: '/',
    sidebarName: 'Home',
    component: Home
  },
  {
    path: '/standings',
    sidebarName: 'Standings',
    component: Standings
  },
  {
    path: '/teams',
    sidebarName: 'Teams',
    component: Teams
  },
];

export default Routes;

잠시 동안 일부 자리 표시자 구성 요소( Home , Standings 및 Teams )를 만듭니다.

내비게이션바

NavigationBar라는 새 구성 요소 하위 폴더를 만듭니다. 새 구성 요소는 NavigationBar.tsx 입니다.

import React, { useState } from 'react';

import { NavLink, withRouter } from 'react-router-dom';
import Routes from '../App/Routes';

import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import {
  AppBar,
  Toolbar,
  Typography,
  IconButton,
  Drawer,
  MenuList,
  MenuItem,
  ListItemText,
 } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
    drawer: {
      width: 300,
    },
    fullList: {
      width: 'auto',
    },
  }),
);

const NavigationBar: React.FC = (props: any) => {
  const classes = useStyles();
  const [isOpen, setIsOpen] = useState(false);
  const toggleDrawer = (open: boolean) => (
    event: React.KeyboardEvent | React.MouseEvent,
  ) => {
    if (
      event.type === 'keydown' &&
      ((event as React.KeyboardEvent).key === 'Tab' ||
        (event as React.KeyboardEvent).key === 'Shift')
    ) {
      return;
    }

    setIsOpen(open);
  };

  const activeRoute = (routeName: any) => {
    return props.location.pathname === routeName ? true : false;
  }

  return (
    <div>
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" onClick={toggleDrawer(true)}>
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={classes.title}>
              Football Almanac
            </Typography>
          </Toolbar>
        </AppBar>
      </div>
      <Drawer classes={{ paper: classes.drawer }} open={isOpen} onClose={toggleDrawer(false)}>
        <div
          className={classes.fullList}
          role="presentation"
          onClick={toggleDrawer(false)}
          onKeyDown={toggleDrawer(false)}
        >
          <MenuList>
            {Routes.map((prop, key) => {
              return (
                <NavLink to={prop.path} style={{ textDecoration: 'none' }} key={key}>
                  <MenuItem selected={activeRoute(prop.path)}>
                    <ListItemText primary={prop.sidebarName} />
                  </MenuItem>
                </NavLink>
              );
            })}
          </MenuList>
        </div>
      </Drawer>
    </div>
  );
};

export default withRouter(NavigationBar);

이 구성 요소 내에서 브라우저 탐색을 사용할 수 있도록 하기 위해 React Router DOMwithRouter과 함께 제공되는 상위 구성 요소를 사용했습니다.

It passes updated match, location, and history props to the wrapped component whenever it renders.

withRender 에 대해 자세히 알아보려면 documentation 을 살펴보십시오.

App.tsx

import React from 'react';

import { Switch, Route } from 'react-router-dom';
import Routes from './Routes';

import NavigationBar from './NavigationBar/NavigationBar';

const App: React.FC = () => {
  return (
    <div>
      <NavigationBar />
      <Switch>
        {Routes.map((route: any) => (
          <Route exact path={route.path} key={route.path}>
            <route.component />
          </Route>
        ))}
      </Switch>
    </div>
  );
}

export default App;

다음 스니펫을 이해하는 것이 중요합니다. 독립 모듈에서 경로를 쉽게 추가하고 제거할 수 있으므로 이를 반복하고 개체에 정의된 각 경로에 대한 경로를 만드는 것으로 충분합니다.

<Switch>
  {Routes.map((route: any) => (
    <Route exact path={route.path} key={route.path}>
      <route.component />
    </Route>
  ))}
</Switch>

결과는 다음과 같습니다

무엇 향후 계획

다음 단계에서는 API에서 가져온 일부 데이터를 표시할 홈 페이지를 만듭니다.

유용한 리소스

React Router DOM(웹 및 기본)https://reacttraining.com/react-router/

withRouter https://reacttraining.com/react-router/web/api/withRouter

소재 UI <MenuList> https://material-ui.com/api/menu-list/