Skip to content

React-router-dom

Categories

  • ReactRouterDom:Navigate

Installation

You can install React Router from the public npm registry with either npm or yarn. Since we’re building a web app, we’ll use react-router-dom in this guide. 

yarn add react-router-dom

Basic Routing 

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

Drawer 스타일을 중첩 라우팅으로 해결하는 방법 

import {Navigate, createBrowserRouter} from 'react-router-dom';
import App from '../App';
import Dashboard from '../pages/Dashboard';
import Discover from '../pages/Discover';
import Information from '../pages/Information';
import Live from '../pages/Live';
import Preview from '../pages/Preview';
import Statistic from '../pages/Statistic';
import MainOutlet from '../components/MainOutlet';
import WorkDrawer from '../components/WorkDrawer';

export const paths = {
  root: '/',
  dashboard: '/dashboard',
  live: '/live',
  discover: '/discover',
  work: '/work',
  information: '/work/information',
  preview: '/work/preview',
  statistic: '/work/statistic',
};

export const router = createBrowserRouter([
  {
    path: paths.root,
    element: <App />,
    children: [
      {
        index: true,
        element: <Navigate to={paths.dashboard} replace />,
      },
      {
        element: <MainOutlet />,
        children: [
          {
            path: paths.dashboard,
            element: <Dashboard />,
          },
          {
            path: paths.live,
            element: <Live />,
          },
          {
            path: paths.discover,
            element: <Discover />,
          },
        ],
      },
      {
        path: paths.work,
        element: <WorkDrawer />,
        children: [
          {
            path: paths.information,
            element: <Information />,
          },
          {
            path: paths.preview,
            element: <Preview />,
          },
          {
            path: paths.statistic,
            element: <Statistic />,
          },
        ],
      },
    ],
  },
]);

MainOutlet 

import React from 'react';
import {Outlet} from 'react-router-dom';

import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import CssBaseline from '@mui/material/CssBaseline';

const ToolbarSpace = () => {
  return <Toolbar variant="dense" />;
};

function MainOutlet() {
  return (
    <Box component="main" sx={{flexGrow: 1}}>
      <ToolbarSpace />

      <CssBaseline />
      <Outlet />
    </Box>
  );
}

export default MainOutlet;

WorkDrawer 

import React from 'react';
import {useSelector} from 'react-redux';
import {useNavigate} from 'react-router-dom';

import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';
import Drawer from '@mui/material/Drawer';
import ImageIcon from '@mui/icons-material/Image';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import LocalShippingIcon from '@mui/icons-material/LocalShipping';
import ShowChartIcon from '@mui/icons-material/ShowChart';
import Toolbar from '@mui/material/Toolbar';

import MainOutlet from './MainOutlet';
import {paths} from '../routes/router';
import {selectWork} from '../stores/apis/work';

const ToolbarSpace = () => {
  return <Toolbar variant="dense" />;
};

function WorkDrawer() {
  const navigate = useNavigate();
  const work = useSelector(selectWork);

  const onInformation = () => {
    navigate(paths.information);
  };

  const onPreview = () => {
    navigate(paths.preview);
  };

  const onStatistic = () => {
    navigate(paths.statistic);
  };

  const drawerWidth = 240;

  return (
    <React.Fragment>
      <Drawer
        variant="permanent"
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          [`& .MuiDrawer-paper`]: {width: drawerWidth, boxSizing: 'border-box'},
        }}
      >
        <ToolbarSpace />
        <Box sx={{overflow: 'auto'}}>
          <List>
            <ListItem disablePadding onClick={onInformation}>
              <ListItemButton>
                <ListItemAvatar>
                  <Avatar variant="square">
                    <LocalShippingIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  primary={work.carNumber}
                  primaryTypographyProps={{fontWeight: 'bold'}}
                  secondary={work.issueNumber}
                />
              </ListItemButton>
            </ListItem>

            <Divider />

            <ListItem disablePadding onClick={onPreview}>
              <ListItemButton>
                <ListItemIcon>
                  <ImageIcon />
                </ListItemIcon>
                <ListItemText primary="이벤트 영상" />
              </ListItemButton>
            </ListItem>

            <ListItem disablePadding onClick={onStatistic}>
              <ListItemButton>
                <ListItemIcon>
                  <ShowChartIcon />
                </ListItemIcon>
                <ListItemText primary="통계 분석" />
              </ListItemButton>
            </ListItem>
          </List>
        </Box>
      </Drawer>

      <MainOutlet />
    </React.Fragment>
  );
}

export default WorkDrawer;

See also

Favorite site