Más contenido relacionado
Similar a 11.react router dom (20)
11.react router dom
- 6. 라우터적용
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(<BrowserRouter> <App /> </BroserRouter>,
document.getElementById('root'));
}
2020.ReactJS 6
- 7. 라우터적용
app.js
import React from 'react';
import { Route } from 'react-router-dom';
import About from './About';
import Home from './Home';
export default () => {
return (
<div>
<Route path="/" component={Home} exact={true} />
<Route path="/about" component={About} />
</div>
);
}
2020.ReactJS 7
- 10. Link컴포넌트사용예
app.js
import React from 'react';
import { Route, Link } from 'react-router-dom';
import About from './About';
import Home from './Home';
export default () => {
return (
<div>
<ul>
<li><Link to="/">홈</Link></li>
<li><Link to="/about">소개</Link></li>
</ul>
<Route path="/" component={Home} exact={true} />
<Route path="/about" component={About} />
</div>
);
}
2020.ReactJS 10
- 14. app.js
import React from 'react';
import { Route, Link } from 'react-router-dom';
import About from './About';
import Info from './Info';
import Home from './Home';
export default () => {
return (
<div>
<ul>
<li><Link to="/">홈</Link></li>
<li><Link to="/about">소개</Link></li>
<li><Link to="/info/lahuman">lahuman 정보 조회</Link></li>
</ul>
<Route path="/" component={Home} exact={true} />
<Route path="/about" component={About} />
<Route path="/info/:id" component={Info} />
</div>
);
}
2020.ReactJS 14
- 17. URL쿼리예제
qs를이용하여파싱된결과는언제나문자열입니다.
import React from 'react';
import qs from 'qs';
export default ({location}) => {
const query = qs.parse(location.search, {
ignoreQueryPrefix: true // 문자열 맨 앞의 ?를 생략 합니다.
});
return <h1>{query.id}</h1>
}
2020.ReactJS 17
- 18. 서브라우트
서브라우트는라우트내부에도라우트를정의하는것을의미합니다.
그냥라우트로사용되고있는컴포넌트의내부에Route컴포넌트를또사용하면됩니다.
import React from 'react';
import { Route, Link } from 'react-router-dom';
import Info from './Info';
export default () => {
return (
<div>
<ul>
<li><Link to="/info/abcd">abcd 정보 조회</Link></li>
<li><Link to="/info/lahuman">lahuman 정보 조회</Link></li>
</ul>
<Route path="/info" exact render={() => <div>사용자를 선택해주셔요.</div>} />
<Route path="/info/:id" component={Info} />
</div>
);
}
2020.ReactJS 18
- 20. history예제
import React from 'react';
export default ({history}) => {
return (
<div>
<button onClick={() => history.push('/')}>홈으로</button>
<button onClick={() => history.goBack()}>뒤로</button>
</div>
);
}
2020.ReactJS 20
- 21. withRouter예제
import React from 'react';
import { withRouter } from 'react-router-dom';
export default withRouter(({location, match, history}) => {
const query = qs.parse(location.search, {
ignoreQueryPrefix: true // 문자열 맨 앞의 ?를 생략 합니다.
});
return
<div>
<h1>{query.id}</h1>
<button onClick={() => history.push('/')}>홈으로</button>
<button onClick={() => history.goBack()}>뒤로</button>
</div>
})
2020.ReactJS 21
- 22. Switch예제
import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import About from './About';
import Info from './Info';
import Home from './Home';
export default () => {
return (
<div>
<ul>
<li><Link to="/">홈</Link></li>
<li><Link to="/about">소개</Link></li>
<li><Link to="/info/lahuman">lahuman 정보 조회</Link></li>
</ul>
<Switch>
<Route path="/" component={Home} exact={true} />
<Route path="/about" component={About} />
<Route path="/info/:id" component={Info} />
<Route render={({location}) => <div>
<h2>페이지가 존재 하지 않습니다.</h2>
<p>{location.pathname}</p>
</div>} />
</Switch>
</div>
);
}
2020.ReactJS 22
- 23. NavLink예제
import React from 'react';
import { Route, NavLink } from 'react-router-dom';
import Info from './Info';
export default () => {
const activeStyle = {
background: 'red',
color: 'white'
}
return (
<div>
<ul>
<li><NavLink activeStyle={activeStyle} to="/info/abcd" active>abcd 정보 조회</NavLink></li>
<li><NavLink activeStyle={activeStyle} to="/info/lahuman">lahuman 정보 조회</NavLink></li>
</ul>
<Route path="/info" exact render={() => <div>사용자를 선택해주셔요.</div>} />
<Route path="/info/:id" component={Info} />
</div>
);
}
2020.ReactJS 23