BrowserRouter로 Root컴포넌트를 감싸줘서 그 밑에서 Route를 이용할 수 있도록 해준다.
pages/index.js를 작성
컴포넌트를 활용해 django의 urls와 최대한 비슷하게 구현해 준다.
exact를 안하게 될시, 일치하는 것들이 모든것들이 표시되기에 해주는 것이 좋다.
```javascript
import React from "react";
import { Route } from "react-router-dom";
import AppLayout from "components/AppLayout";
import Home from "./Home"
import About from "./About"
import AccountsRoutes from "./accounts"
function Root() {
return
최상위 컴포넌트
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route path="/accounts" component={AccountsRoutes} />
;
}
export default Root;
```
#### accounts/index.js
함수안에 {match}라는 것이 보일텐데, 상위에서 일치한 url을 갖고와줄 수 있다.
```javascript
import React from "react";
import { Route } from "react-router-dom";
import Profile from "./Profile";
import Login from "./Login";
function Routes({match}) {
return (
<>
<Route exact path={match.url + "/profile"} component={Profile} />
<Route exact path={match.url + "/login"} component={Login} />
</>
);
}
export default Routes;
```
djangopython
미소여우의 주석달기