React Router
Đầu tiên chúng ta cần cài đặt React Router DOM vơi lệnh
npm i react-router-dom
Tiếp theo chúng ta sẽ code file src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import {BrowserRouter, Route, Routes} from "react-router-dom";
import Home from "./pages/home";
import About from "./pages/about";
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path='/' element={<App />}></Route>
<Route path='/home' element={<Home />}/>
<Route path='/about' element={<About />}/>
</Routes>
</BrowserRouter>
</React.StrictMode>,
)
file src/App.tsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
import {Link} from "react-router-dom";
function App() {
const [count, setCount] = useState(0)
return (<>
<div className='link_to_path'>
<Link to='/home'>Home</Link>
<br/>
<Link to='/about'>About</Link>
</div>
</>
)
}
export default App
Tiếp theo src/pages/home.tsx
import React from "react";
import {Link} from "react-router-dom";
const Home = () => {
return(
<>
<Link to='/about' >ABout</Link>
<Link to='/' >Trang chủ</Link>
</>
)
}
export default Home;
file src/pages/about.tsx
import React from "react";
import {Link} from "react-router-dom";
const About = () => {
return(
<>
<Link to='/home' >Home</Link>
<Link to='/' >Trang chủ</Link>
</>
)
}
export default About;
Thế là xong demo