React路由實現項目中的導航欄功能

一.前言

以前我有介紹過使用vue路由來實現項目中的導航欄功能,在本案例中將以最基本的啓發模型來使用React路由實現一樣的功能,除此以外我還會介紹React的腳手架

二.React腳手架

我使用的開發工具是vscode,打開vscode,選擇終端打開

1.安裝腳手架

npm i create-react-app -g
複製代碼

2.建立項目

create-react-app my-app
複製代碼

3.啓動頁面

在成功建立項目後,會提示你執行相應的命令來啓動頁面

或者執行下面命令

yarn start app
複製代碼

能夠看出,相比vue來講,React腳手架搭建項目結構仍是十分簡單的

三.整理項目結構

使用腳手架搭建好結構後,通常來講,咱們只須要修改src和public兩個目錄便可

下面,我在src目錄只留下面兩個文件,其餘的均刪除

Appp.js

index.js

四.測試

1.修改App.js

import React from 'react'
class App extends React.Component {
  render() {
    return (<h1>hello world</h1>)
  }
}
// 導出根組件
export default App
複製代碼

2.修改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root')); 複製代碼

3.保存,查看頁面是否顯示hello world

若是成功顯示,說明只留下這兩個文件是沒有問題的,下面正式開始實現導航欄

五.實現導航欄

1.安裝路由

npm i react-router-dom
複製代碼

2.修改App.js

import React from 'react';
import Home from './Componemts/Home.jsx'
import User from './Componemts/User.jsx'
import Login from './Componemts/Login.jsx'
import { HashRouter, Route, Link ,Switch} from 'react-router-dom'
function App() {
  return (
    <div className="App">
      <HashRouter> 
        <ul>
          <li><Link to='/home'>首頁</Link></li>
          <li><Link to='/user'>用戶</Link></li>
          <li><Link to='/login'>登陸</Link></li>
        </ul>
        <Switch>
          <Route path='/home' component={Home}/>
          <Route path='/user' component={User}/>
          <Route path='/login' component={Login}/>
        </Switch>
      </HashRouter>
     
    </div>
  );
}

export default App;

複製代碼

咱們能夠看到代碼中,引入了三個組件

import Home from './Componemts/Home.jsx'
import User from './Componemts/User.jsx'
import Login from './Componemts/Login.jsx'
複製代碼

3.建立三個組件

在src目錄下,新建一個Components目錄,該目錄下新建下面三個文件

//Home.jsx

import React from 'react'
class Home extends React.Component{
    render(){
        return (
            <div>我是首頁</div>
        )
    }
}
export default Home
複製代碼

//User.jsx

import React from 'react'
class User extends React.Component{
    render(){
        return (
            <div>我是用戶頁</div>
        )
    }
}
export default User
複製代碼

//Login.jsx

import React from 'react'
class Login extends React.Component{
    render(){
        return (
            <div>我是登陸頁</div>
        )
    }
}
export default Login
複製代碼

好了到這一步,整個導航的啓發模型就已經寫好了,保存,刷新頁面就能夠看效果了

六.知識點總結

1.按需引入React組件

須要用到什麼就引入什麼,沒有用到的就不用引入,不然可能報錯

import { HashRouter, Route, Link ,Switch} from 'react-router-dom'
複製代碼

2.路由容器

至於你用哪一個,能夠本身選擇,而在vue中,是沒有路由容器的,但能夠設置去掉#號

//HashRouter和BrowserRouter都是核心的路由容器
// HashRouter經過錨點來實現的，路徑帶了#
// BrowserRouter經過H5的history模式實現，路徑不帶#
複製代碼

3.路由匹配規則

// 路由匹配規則相關的組件有倆
//使用Switch把一組route包裹起來，保證只顯示一個組件
// Switch: 開關，
// Route: 表示一個匹配規則
複製代碼

若是咱們把App.j修改爲下面這樣,看會有怎麼樣顯示的效果

import React from 'react';
import Home from './Componemts/Home.jsx'
import User from './Componemts/User.jsx'
import Login from './Componemts/Login.jsx'
import { HashRouter, Route, Link ,Switch} from 'react-router-dom'
function App() {
  return (
    <div className="App">
      <HashRouter> 
        <ul>
          <li><Link to='/home'>首頁</Link></li>
          <li><Link to='/home/aa'>用戶</Link></li>
          <li><Link to='/login'>登陸</Link></li>
        </ul>
          <Route path='/home' component={Home}/>
          <Route path='/home/aa' component={User}/>
          <Route path='/login' component={Login}/>
      </HashRouter>
     
    </div>
  );
}
export default App;
複製代碼

在點擊導航欄中的"用戶"時,頁面中會同時顯示"首頁","用戶"這兩個組件的內容

若是,咱們使用Switch將一組路由包起來

<Switch>
    <Route path='/home' component={Home}/>
    <Route path='/home/aa' component={User}/>
    <Route path='/login' component={Login}/>
</Switch>
複製代碼

在點擊導航欄中的"用戶"時,頁面中只會顯示"首頁"這個組件的內容

因此在寫路由的時候,要注意這些問題

4.路由鏈接 Link NavLink

• Link: to屬性，表示的點擊這個Link，跳轉到的路由， Link最終渲染成a標籤
• NavLink: 做用和Link是同樣的，路由跳轉NavLink比Link更強大的一點是能夠指定樣式

5.Redirect

表示路由的重定向,使用時必定要加exact,exact表示精確匹配

咱們通常會在導航欄下面默認顯示首頁的內容

<Switch>
	<Redirect exact from="/" to="/home" />
    <Route path='/home' component={Home}/>
    <Route path='/user' component={User}/>
    <Route path='/login' component={Login}/>
</Switch>
複製代碼

若是咱們在重定向時,不加exact,那麼只要是/xxx的路由都匹配上