현재 React 를 이용해서 라우팅으로 About.JS 파일내 Hello World를 출력 하고 싶은데


문제는 http://localhost:3000/About 이렇게 해당 링크로 이동은 하는데 출력이 안됩니다...


import React, { Component } from 'react'; import styled from 'styled-components'; import {Link,Route} from 'react-router-dom'; import About from "../Components/About"; /*import Like from "../Components/Like"; import MyBoards from "../Components/MyBoards"; import MyPage from "../Components/MyPage";*/ class Navigation extends Component { render() { return ( <Nav> <Route exact path='/About' component={About}> </Route> <NavList> <NavItem><Link to='/About' >자기소개</Link></NavItem> </NavList> </Nav> ); } } export default Navigation;

문제가 발생하는 해당 스크립트 코드 입니다. 

현재 Route 를 통해 About 링크를 지정? 해주고 Link 로 About.js 로 넘겨주는데 


About.js에 Hello World 가 출력이 안됩니다...

viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73ded83fa11d0283177940c12fe472eea84be02aa9a6012b1370fb4d27347fdf78b5fa53f1168b2e8a1f9beb6eb0b1dfe6dd0c2114a4b45ddcf0c4ca1ad9221ㅁ


패키지 구성 내용이구요...


App.js 내용은 다음과 같습니다.

import styled from 'styled-components'; import Header from './Layout/Header'; import Navigation from "./Layout/Navigation"; class App extends Component { render() { return ( <Layout> <Header /> <Navigation /> </Layout> ); } } const Layout = styled.div` margin: 0 auto; display: flex; width: 100%; flex-flow: row wrap; ` export default App;