React Router의 변경사항을 알아보자.
Rich Router와의 통합을 진행하였다.
Link to -> Route path
Switch -> Routes
render -> element
exact 삭제
path="/user/:id" -> path=":id" 상대경로```로 지정
여러 라우팅을 매칭하고 싶으면 *
을 사용
V6
import {BrowserRouter, Routes, Route, Link } from 'react-router-dom';
function App(){
return (
<BrowserRouter>
<Routes>
<Route path="/" element ={<Home />}/>
<Route path ="user/*" element={<Users />} />
</Routes>
</BrowserRouter>
);
}
function Users(){
return (
<div>
<nav>
<Link to="me">My Profile</Link>
</nav>
<Routes>
<Route path=":id" element={<UserProfile />} />
<Route path="me" element={<OwnUserProfile />} />
</Routes>
</div>
)
}
// Router.js
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import User from "../Pages/User";
import UserProfile from "../Pages/UserProfile";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="user/*" element={<User />}>
<Route path=":id" element={<UserProfile />} />
</Route>
</Routes>
</BrowserRouter>
);
};
export default Router;
// User.js
import React from "react";
import { Link, Routes, Route, Outlet } from "react-router-dom";
import UserProfile from "./UserProfile";
const User = () => {
return (
<div>
<h1>This is Web</h1>
<ul>
<li>
<Link to="1">Post #1</Link>
</li>
<li>
<Link to="2">Post #2</Link>
</li>
<li>
<Link to="3">Post #3</Link>
</li>
<li>
<Link to="4">Post #4</Link>
</li>
</ul>
//핵심!!!!!!!!!!!!!!!!!!!!!!!!!!!
<Outlet />
</div>
);
};
export default User;
// --------------------------------------------------------------------------------
// UserProfile.js
import React from "react";
const UserProfile = () => {
return <div>This is UserProfile</div>;
};
export default UserProfile;
// Router.js
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import User from "../Pages/User";
import UserProfile from "../Pages/UserProfile";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="user/*" element={<User />}>
</Routes>
</BrowserRouter>
);
};
export default Router;
// User.js
import React from "react";
import { Link, Routes, Route } from "react-router-dom";
import UserProfile from "./UserProfile";
const User = () => {
return (
<div>
<h1>This is Web</h1>
<ul>
<li>
<Link to="1">Post #1</Link>
</li>
<li>
<Link to="2">Post #2</Link>
</li>
<li>
<Link to="3">Post #3</Link>
</li>
<li>
<Link to="4">Post #4</Link>
</li>
</ul>
//핵심!!!!!!!!!!!!!!!!!!!!!!!!!!!
<Routes>
<Route path=":id" element={<UserProfile />} />
</Routes>
</div>
);
};
export default User;
// --------------------------------------------------------------------------------
// UserProfile.js
import React from "react";
const UserProfile = () => {
return <div>This is UserProfile</div>;
};
export default UserProfile;
<Route path=":userId" component={Profile}/>
<Route path=":userId" render={routeProps => (
<Profile routeProps={routeProps}
animate={true}/>)}/>
<Route path=":userId" children={({ match }) => (
match ? (
<Profile match={match} animate={true} />
) : (
<NotFound />
)
)}
/>
<Route path=":userId" element={<Profile />} />
<Route path=":userId" element={<Profile animate={true}/>} />
function Profile({animate})(
let params = useParams();
let location = useLocation():
let navigation = useNavigation();
)
useHistory가 useNavigate
으로 변경
v6.js
import {useNavigate} from 'react-router-dom';
function App(){
let navigate = useNavigate();
function handleClick(){
navigate("/home");
}
return(
<div>
<button onClick={handleClick}>go home</button>
<button onClick={()=> navigate(-2)}>go 2 pages back </button>
<button onClick={()=> navigate(1)}> go forward</button>
</div>
)
}
/groups
/groups/admin
/user/:id
/user/:id/message
/file/*
/file/:id/*
function App(){
return(
<Routes>
<Route path="users" >
<Route path =":id/message"
element={
<Link to=".."/>}/>
// /users
</Route>
</Routes>
)
}