React Router

2017-12-14

React, Router

React Router

폴더 구조

설치방법

기본 세팅

// React typeScript Setting
$ create-react-app react-router --scripts-version=react-scripts-ts

// React router dom
$ yarn add react-router-dom
// typescript여서 설치를 해줘야한다.
$ yarn add @types/react-router-dom

// Semantic Ui 
$ yarn add semantic-ui-react

$ yarn add semantic-ui-css

명령어

BrowserRouter => router로 최상위를 감싼다.
Link => 누를 경우 그 경로로 이동시킨다. (to 사용)
Route => path를 설정해준다.

3가지 전부 react-router-dom 에 존재한다.

tsx prefix의 사용 => jsx라는 문법으로 랜더링을 하기에 typescript라서 tsx를 사용한다.

// App.tsx
import * as React from 'react';
import MenuComponent from './components/Menu'
import 'semantic-ui-css/semantic.min.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
// Topics 폴더의 하위를 가져와야하기 때문이다.
import Topics from './pages/Topics/';

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <MenuComponent />
          <Route exact path="/" component={Home} />
          <Route path="/About" component={About} />
          <Route path="/Topics" component={Topics} />
        </div>
      </Router>
    );
  }
}

export default App;

BrowserRouter as인 router로 최상단을 감싼다음에 div안에 MenuComponent 와 Route들을 설정해준다.

BrowserRouter안에는 1개의 child만 가능함으로 div로 묶어서 표시를 해줘야한다.

// components/Menu.tsx
import * as React from 'react';
// {Menu}를 사용함으로써 semantic에서 Menu를 사용한다는 의미이다.
import { Menu } from 'semantic-ui-react';
// click시에 이동하게 하는 역할을 한다.
import { Link } from 'react-router-dom';

class MenuComponent extends React.Component {
  // JSX.Element는 반환값의 type이다.
  render(): JSX.Element {
    return (
      <Menu>
        <Link to="/About">
          <Menu.Item name="About">
            About
          </Menu.Item>
        </Link>

        <Link to="/">
          <Menu.Item name="Home">
            Home
          </Menu.Item>
        </Link>

        <Link to="/Topics">
          <Menu.Item name="Topics">
            Topics
          </Menu.Item>
        </Link>
      </Menu>
    );
  }
}

export default MenuComponent;

Menu.tsx에서 react-router-dom에서 Link tag를 사용하여서 원하는 url로 이동시킨다.

// Topics/index.tsx
import * as React from 'react';
import { Menu } from 'semantic-ui-react';
import { Link } from 'react-router-dom';

class Topics extends React.Component {
  render() {
    return (
      <Menu>
        <Menu.Item>Topics</Menu.Item>
        <Link to="/A">
          <Menu.Item name="A" />
        </Link>
        <Link to="/B">
          <Menu.Item name="B" />
        </Link>
      </Menu>
    );
  }
}

export default Topics;

// Topics/A.tsx
import * as React from 'react';

class A extends React.Component {
  render() {
    return (
      <div> 여긴 A </div>
    );
  }
}

export default A;

// Topics/B.tsx
import * as React from 'react';

class B extends React.Component {
  render() {
    return (
      <div> 여긴 B </div>
    );
  }
}

export default B;

component로 값을 분리하여 url를 통하여 값을 연결하는 과정을 구현하였다. 아직 topics의 depth영역은 구현하지 못하였다.

TILReactRouter

React Router

폴더 구조

설치방법

명령어