React-router - Add Route in route (double route)

ReactJS - Add Route in route

sorce code는 이전 문서서 재활용한다.

/...../ 는 생략되었다는 표시임

First of all, create component that is called Posts.js.

먼저 Posts.js라는 컴포넌트를 생성한다.

그리고 리스트를 작성하고 URL parameter를 이용해 Link를 걸어준다.

~cra-router/src/routes$ Posts.js

import React from 'react';

import { Route, Link } from 'react-router-dom';

const Post = (match) => {

    return (

        <h2>

            {match.params.title}

        </h2>

    );

};

const Posts = () => {

    return (

        <div>

            <h1>포스트</h1>

            <Link to="posts/react">React</Link><br />

            <Link to="posts/javascript">javascript</Link><br />

            <Link to="posts/dom">dom</Link><br />

            <Link to="posts/html">html</Link><br />

            <Route path="posts/:title" component={Post} />

        </div>

    );

};

export default Posts;

~cra-router/src$ App.js

import React  from 'react';

import { BrowserRouter as Router, Route} from 'react-router-dom';

import Home from './routes/Home';

import About from './routes/About';

import Posts from './routes/Posts';

import Header from './components/Header';

const App = () => {

    return (

            <Router>

                <div>

                    <Header />

                    <Route exact path='/' component={Home} />

                    <Route path='/about/:username' component={About} />

                    <Route path='/posts'  component={Posts} />

                </div>

            </Router>

    )

}

export default App;

~cra-router/src/components$ Header.js

import React from 'react';

import { Link } from 'react-router-dom';

import './Header.css';

const Header = () => {

    return (

        <div className="header">

            <Link to="/" className="item">홈</Link>

            <Link to="/about/boolean" className="item">소개</Link>

            <Link to="/posts" className="item">포스트</Link>

        </div>

    );

};

export default Header;

Previous Page

Next Page