Tìm hiểu về ReactJS Router với ví dụ tại phía Client
Xem thêm các chuyên mục:
Nhóm phát triển của chúng tôi vừa ra mắt website
langlearning.net
học tiếng
Anh,
Nga,
Đức,
Pháp,
Việt,
Trung,
Hàn,
Nhật,
...
miễn phí cho tất cả mọi người.Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
// <BrowserRouter>
http://example.com/about
// <HashRouter>
http://example.com/#/about
<BrowserRouter>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</BrowserRouter>
<HashRouter>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</HashRouter>
<BrowserRouter>
...
<Route path="/about" component={About}/>
...
</BrowserRouter>
http://example.com/about ==> OK Work!
http://example.com/about#somthing ==> OK Work!
http://example.com/about/something ==> OK Work!
http://example.com/about/a/b ==> OK Work!
-------------------
http://example.com/something/about ==> Not Work!
http://example.com/something/about#something ==> Not Work!
http://example.com/something/about/something ==> Not Work!
<HashRouter>
...
<Route path="/about" component={About}/>
...
</HashRouter>
http://example.com#/about ==> OK Work!
http://example.com#/about/somthing ==> OK Work!
----------------
http://example.com/something ==> Not Work!
http://example.com/something#/about ==> Not Work!
<BrowserRouter>
...
<Route exact path="/about" component={About}/>
...
</BrowserRouter>
http://example.com/about ==> OK Work!
http://example.com/about#somthing ==> OK Work!
-------------
http://example.com/about/something ==> Not Work!
http://example.com/about/a/b ==> Not Work!
http://example.com/something/about ==> Not Work!
http://example.com/something/about#something ==> Not Work!
http://example.com/something/about/something ==> Not Work!
<HashRouter>
...
<Route exact path="/about" component={About}/>
...
</HashRouter>
http://example.com#/about ==> OK Work!
----------------
http://example.com#/about/somthing ==> Not Work!
http://example.com/something ==> Not Work!
http://example.com/something#/about ==> Not Work!
Nếu bạn đang tìm một ví dụ về React Router tại phía Server (NodeJS) các bài viết dưới đây có thể có ích cho bạn:
<!-- React & ReactDOM Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<!-- React Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.min.js"></script>
<!-- Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<!-- CSS -->
<link rel = "stylesheet" type = "text/css" href = "router-example.css" />
Nếu bạn muốn tìm kiếm một phiên bản thư viện mới hơn hãy truy cập vào link dưới đây:
.product {
padding: 5px;
margin-bottom: 15px;
background-color: #ddd;
}
.product-nav a {
background-color: #ddd;
margin: 5px;
padding: 5px;
text-decoration: none
}
.selected {
color: red;
}
.route-place {
margin-top: 10px;
padding: 30px;
height: 100%;
border: 1px solid #ddd;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ReactJS Router</title>
<!-- React & ReactDOM Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<!-- React Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.min.js"></script>
<!-- Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<!-- CSS -->
<link rel = "stylesheet" type = "text/css" href = "hashrouter-example.css" />
</head>
<body>
<h3>Client Side ReactJS Router</h3>
<div id="app"></div>
<script src="hashrouter-example.jsx" type="text/babel"></script>
</body>
</html>
// import {BrowserRouter,NavLink} from 'react-router-dom';
// const { HashRouter, NavLink, Route } = ReactRouterDOM;
// Component
class ProductShortInfo extends React.Component {
render() {
return (
<div className="product">
<h3>Samsung Galaxy S9</h3>
<p>Price: $900</p>
</div>
);
}
}
// Component
class ProductFeature extends React.Component {
render() {
return <h3>Some Features of Samsung Galaxy S9!</h3>;
}
}
// Component
class ProductImages extends React.Component {
render() {
return <h3>Some Images of Samsung Galaxy S9</h3>;
}
}
// Component
class ProductComments extends React.Component {
render() {
return <h3>Some Customer Comments</h3>;
}
}
//
class Product extends React.Component {
render() {
return (
<ReactRouterDOM.HashRouter>
<div>
<ProductShortInfo />
<div className="product-nav">
<ReactRouterDOM.NavLink exact to="/" activeClassName="selected">
Feature
</ReactRouterDOM.NavLink>
<ReactRouterDOM.NavLink exact to="/images" activeClassName="selected">
Images
</ReactRouterDOM.NavLink>
<ReactRouterDOM.NavLink to="/comments" activeClassName="selected">
Comments
</ReactRouterDOM.NavLink>
</div>
<div className="route-place">
<ReactRouterDOM.Route exact path="/" component={ProductFeature} />
<ReactRouterDOM.Route exact path="/images" component={ProductImages} />
<ReactRouterDOM.Route path="/comments" component={ProductComments} />
</div>
</div>
</ReactRouterDOM.HashRouter>
);
}
}
//
class App extends React.Component {
render() {
return <Product />;
}
}
// Render
ReactDOM.render(<App />, document.querySelector("#app"));
Chú ý: Hai thành phần: <ReactRouterDOM.NavLink> & <ReactRouterDOM.Link> rất giống nhau về cách sử dụng, <ReactRouterDOM.NavLink> tốt hơn vì nó hỗ trợ thuộc tính activeClassName (Có ích trong ví dụ này).
