之前,我們嘗試了類似 tab頁籤功能的路由學習;
現在我們來看下基本的各個頁面間的路由的實作;
下面實作一個基礎的四個頁面的項目的路由的處理:
我們預設進入首頁 home, 也就是通路根目錄的時候進入home 頁面;
當我們在位址欄中輸入 /Intro 的時候,我們進入介紹頁面;
當我們在位址欄中輸入/Func 的時候,我們進入功能頁面;
當我們在位址欄中輸入/Show 的時候,我們進入展示頁面;
第一步: 使用 create-react-app 建立一個測試的項目,我在 f 盤下面建立了react-app-delete 目錄,然後再這個
react-app-delete 目錄下使用指令 create-react-app my-app-do 建立my-app-do 這個測試項目;
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIwczX0xiRGZkRGZ0Xy9GbvNGL2EzXlpXazxSeWd0Yy4kMMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnLyAzMzMzM1EjM5EjMwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
我們按照上面的提示,先使用指令 cd my-app-do 進入我們建立的 my-app-do 項目;
再使用指令 npm start 啟動這個項目,我們 可以看到浏覽器中正常啟動即可,項目沒有問題;
第二步: 使用 create-react-app 指令建立的項目本身有預設的顯示的頁面,是以我們需要修改下;
我們先打開項目my-app-do,生成的預設的項目的首頁是通過 src/index.js 檔案渲染的 App.js;
也就是說這個預設生成的首頁是 src/App.js 檔案,這個檔案通過 src/index.js 挂載到 public
下的Index.html中;
我們舍棄這個預設生成的頁面 src/App.js
然後我們首先在 src 目錄下建立 Pages 目錄,用來放置幾個新加的頁面;
我們在Pages下建立一個首頁的 home 元件,也就是首頁的頁面,
建立一個簡介元件 intro;
再建立一個功能元件 func ,
最後建立一個展示元件 show;
幾個需要跳轉的頁面寫好了,再增加一個路由的元件,用來實作項目的路由,在src目錄下
建立 Router目錄,增加 Router目錄中建立 router.js檔案;
上面目錄和檔案建立完成之後的項目目錄結構如下:
上面新增檔案和代碼如下:
1. func.js
import React from 'react';
import './func.css';
export default class Func extends React.Component {
render(){
return(
<div>我是功能頁面</div>
)
}
}
2.home.js
import React from 'react';
import './home.css'
export default class Home extends React.Component {
render(){
return(
<div>我是首頁檔案</div>
)
}
}
3.intro.js
import React from 'react';
import './intro.css';
export default class Intro extends React.Component {
render(){
return(
<div>我是簡介頁面</div>
)
}
}
4.show.js
import React from 'react';
import './show.css';
export default class Show extends React.Component {
render(){
return(
<div>我是展示的頁面</div>
)
}
}
其餘的樣式檔案都是空,func.css home.css intro.css show.css ,我在每個元件的頁面中隻是添加了一句話,
是以沒有設定任何的樣式,你可以自己設定相應的樣式即可;
5.router.js
import React from 'react';
import {BrowserRouter as Routerme, Route, Link, Switch} from "react-router-dom";
import Home from '../Pages/Home/home';
import Intro from '../Pages/Intro/intro';
import Func from '../Pages/Func/func';
import Show from '../Pages/Show/show';
export default class Router extends React.Component {
render(){
return(
<Routerme>
<Switch>
<Route exact={true} path="/" component={Home}></Route>
<Route path="/Intro" component={Intro}></Route>
<Route path="/Func" component={Func}></Route>
<Route path="/Show" component={Show}></Route>
</Switch>
</Routerme>
)
}
}
上面就是我們需要增加的檔案;
除了上面增加的檔案,我們還需要修改一下 src/index.js 檔案;
預設生成的項目預設渲染了 App 這個元件作為顯示的頁面,我們現在把我們寫好的路由元件 Router 作為渲染的對象;
也就是 React.DOM 的對象改為 <Router/.>元件就可以了;
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Router from './Router/router';
import * as serviceWorker from './serviceWorker';
// ReactDOM.render(<App />, document.getElementById('root')); 原先的代碼
ReactDOM.render(<Router/>,document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
做完上面的工作;
我們在浏覽器中可以看到位址欄是:http://localhost:3000/ ,顯示的内容是:我是首頁檔案
我們修改位址欄:http://localhost:3000/intro ,顯示的内容是:我是簡介頁面
其餘的頁面也是同理;
上面的路由實作了預設顯示首頁,然後我們修改路由位址可以改變顯示的頁面;
下一篇我們嘗試預設顯示首頁,然後在首頁中點選跳轉相應的頁面的處理;