2??: ?? ???? ??

Home.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

export default App;




<p><strong>About.js</strong><br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

NotFound.js

import React from 'react';

const About = () => {
  return <h2>About Us</h2>;
};

export default About;

React Router v6? ??? ?? ???

??? ID? URL? ??? ??? ??? ???? ?? ?? ??? ???? ?? React Router v6? useParams ??? ?????.

1??: ?? ?? ??

import React from 'react';

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

export default NotFound;

??:

• :userId? ?? ??? ?? ???????. useParams ??? ???? UserProfile ?? ??? userId ?? ???? ? ????.
• /user/123?? ???? UserProfile ?? ??? userId? 123?? ????? ?????.

React Router v6? ?? ??

?? ??? ???? ?? ?? ?? ?? ??? ???? ??? ????? ??? ? ????.

1??: ?? ? ?? ?? ??

import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams();  // Extract the userId from the URL

  return <h2>User Profile for ID: {userId}</h2>;
};

const App = () => {
  return (
    <Routes>
      <Route path="/user/:userId" element={<UserProfile />} />
    </Routes>
  );
};

export default App;

??:

• ???? ?????? ?? ? ??? ?? ?? ??? ???? ????.
• ?? ??? /*? ???? ?? ?? ??? /dashboard?? ?????.

React Router v6 ??

React Router v6?? ??? ??? ???? ????? ?? ?? ??? ???????.

1. useNavigate: ????? ???? ??? ??? ?????.
2. useParams: ?? URL ????? ??????.
3. useLocation: ?? ??(URL)? ?? ??? ?????.
4. useMatch: ?? URL? ?? ??? ??????.
5. useResolvedPath: ??? ?? URL? ?????.

?: ?? ?? ??

useNavigate ??? ???? ?????? ??? ????? ???? ??? ? ????.

npm install react-router-dom@6
# or
yarn add react-router-dom@6

React Router v6 ?? ??

• ????? ??? ??: React Router v6? ????? ??? ???? ?????? ??? ??? ???? ??? ?? ??? ? ?? ??? ? ????.
• ?? Prop ??: ?? ?? Prop? ???? ?? JSX? ?? Prop? ?? ???? ??? ????? ??? ??? ???? ????.
• ?? ???: ?? ??? ???? ?? ??? ??? ??? ??? ????? ???? ??? ????? ?? ?? ???? ?????.
• ????? ??? 404 ??: ???? ?? ?? ??? ???? 404 ???? ????? ???? ?? ??? ??????? ????? *? ?????.

??

React Router v6?? ? ??? API, ? ?? ?? ??, ?? ? ?? ??? ?? ??? ?? ? ?? ??? ?? ?? ?? ?? ??? ???????. useNavigate, useParams ? useLocation? ?? ??? ???? React ???????? ???? ??? ??? ???? ??? ? ????.