import React from "react";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
function App() {
return (
<div className="App">
<h1>App</h1>
<BrowserRouter>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/board">Board</Link>
</li>
<li>
<Link to="/pic">Picture</Link>
</li>
</ul>
<Switch>
<Route exact path="/" component={Home}></Route>
<Route path="/board" component={Board}></Route>
<Route path="/pic" component={Picture}></Route>
</Switch>
</BrowserRouter>
</div>
);
}
function Home() {
return <div>Home component</div>;
}
function Board() {
return <div>Board component</div>;
}
function Picture() {
return <div>Picture component</div>;
}
export default App;
<NavLink to="/faq" activeClassName="selected">
FAQs
</NavLink>
<NavLink
to="/faq"
activeStyle={{
fontWeight: "bold",
color: "red"
}}
>
FAQs
</NavLink>
const history = useHistory();
function back() {
return history.goBack();
}
Router에 연결되어있지 않다면 withRouter안에 넣어줘야 props 접근이 가능하고 props로 History 접근 가능
import {WithRouter} from 'react-router-dom'
function Add = (props) => {
function back() {
return props.history.goBack();
}
}
export defalut WithRouter(Add);
- react-router-dom은 웹에서 쓰는 컴포넌트
- react-router-native는 앱에서 쓰는 컴포넌트
- react-router는 위의 둘을 합친 패키지.