React react-router-dom 製做簡單tab實現路由機制

React版本迭代太快，致使各類線上資源都是舊版本，還得本身動手！

React 各插件版本：

"react": "^16.2.0",

"react-dom": "^16.2.0",

"react-router": "^4.2.0",

"react-router-dom": "^4.2.2"

 

路由實現效果圖：

 

具體實現方法以下

 

建立新應用：

　　根據 官方文檔  建立新的React項目

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

 

爲了更直觀顯示  直接在 index.js 頁面上添加和修改代碼：

 1 import React, { Component } from "react";
 2 import ReactDOM from "react-dom";
 3 import { BrowserRouter, Route, Link } from "react-router-dom";
 4 import registerServiceWorker from "./registerServiceWorker";
 5 
 6 import "./index.css";
 7 
 8 class SlideLeft extends Component {
 9   render() {
10     return (
11       <div>
12         <h2>你來到了默認頁面</h2>
13         {this.props.children || "Let's Show time "}
14       </div>
15     );
16   }
17 }
18 
19 class columnFirst extends Component {
20   render() {
21     return (
22       <div>
23         <h2>columnFirst</h2>
24         {this.props.children || " show columnFirst "}
25       </div>
26     );
27   }
28 }
29 
30 class columnSecond extends Component {
31   render() {
32     return (
33       <div>
34         <h2>columnSecond</h2>
35         {/* 渲染這個 child 路由組件 */}
36         {this.props.children || "Welcome to your columnSecond"}
37       </div>
38     );
39   }
40 }
41 
42 class TopiContent extends Component {
43   constructor(props) {
44     super(props);
45     console.log(props);
46   }
47 
48   render() {
49     return <h2> {this.props.match.params.topicId}</h2>;
50   }
51 }
52 
53 class columnThird extends Component {
54   render() {
55     return (
56       <div >
57         <h2> Welcome to columnThird </h2>
58         <ul>
59           <li>
60             <Link to={`${this.props.match.url}/1101`}>folderOne</Link>
61           </li>
62           <li>
63             <Link to={`${this.props.match.url}/1102`}>folderOne</Link>
64           </li>
65           <li>
66             <Link to={`${this.props.match.url}/1103`}>folderOne</Link>
67           </li>
68         </ul>
69         <Route exact path={this.props.match.url} render={() => <h3>default select a topic.</h3>} />
70         <Route  path={`${this.props.match.url}/:topicId`} component={TopiContent} />
71       </div>
72     );
73   }
74 }
75 
76 ReactDOM.render (
77   <BrowserRouter>
78     <div>
79       <ul className="slide-bar">
80         <li>
81           <Link to="/first">專欄一</Link>
82         </li>
83         <li>
84           <Link to="/second">專欄二</Link>
85         </li>
86         <li>
87           <Link to="/third">專欄三</Link>
88         </li>
89       </ul>
90       <hr />
91       <Route exact path="/" component={SlideLeft} />
92       <Route path="/first" component={columnFirst} />
93       <Route path="/second" component={columnSecond} />
94       <Route path="/third" component={columnThird} />
95     </div>
96   </BrowserRouter>,
97   document.getElementById("root")
98 );
99 registerServiceWorker();

 

粘貼代碼直接使用......

線上相似案例：https://reacttraining.com/react-router/web/example/basic

 

 

（完）