react 路由

1. 先下載並引入

import {HashRouter as Router, Route, Link, NavLink } from 'react-router-dom'

// 注意：什麼時候使用 BrowserRouter 和 HashRouter ?
// 規範：本地除錯的時候，一般使用 HashRouter。url地址有 # 方便。這種 url地址seo是不太喜歡的。
// BrowserRouter 一般上線使用，利於 SEO。

2.基本使用

import React from "react";
import {HashRouter as Router, Route, Link, NavLink } from 'react-router-dom'

// 注意：什麼時候使用 BrowserRouter 和 HashRouter ?
// 規範：本地除錯的時候，一般使用 HashRouter。url地址有 # 方便。這種 url地址seo是不太喜歡的。
// BrowserRouter 一般上線使用，利於 SEO。


// 預設查詢 Home.js元件；如果找不到，則會把Home當成目錄，去該目錄下查詢index.js元件
import Home from "./components/Home";
import News from "./components/News";
import About from "./components/About";
import MenunLink from './components/MenuLink'


// HashRouter 定義路由的模式 1. hash /# HashRouter  。 2. BrowserRouter  基於 history /
// Router 是上面的別名，容器存放我們 Route
// Route 定義路徑和元件之間的對映關係，我們稱之為路由隱射表
// Link 用於生成導航連結

// 函式式元件裡面完成 spa 應用。需要引入幾個元件。
function App() {
  return (
    <div>
      <h2>react-router-dom 實現 spa</h2>
        <p>現在做出來的 spa 不夠美觀，如果希望足夠美觀</p>
        <p>螞蟻金服做出來的一個 antd ui元件庫</p>
        <p>antd ui元件庫 零件</p>
        <p>https://ant.design/</p>
        <p>antd pro 使用 react + antd 完成後臺的管理系統，半成品</p>
        <p>https://preview.pro.ant.design/list/basic-list</p>

        <Router>
            <h3>Link生成導航</h3>
            <p>需求：需要將使用者點選的當前項高亮</p>
            <Link to="/home">首頁</Link>
            <hr/>
            <Link to="/news">新聞</Link>
            <hr/>
            <Link to="/about">關於</Link>
            <hr/>
            <p>react 自帶了一個可以提供高亮的導航，底層是就是我們的 Route 的 children 這個api</p>
            <hr/>
            {/*NavLink 元件提供了一個 activeClassName 當使用者點選的某個導航的時候，會增加一個active類。其他的不增加*/}
            <NavLink to="/home" activeClassName='active'>首頁</NavLink>
            <NavLink to="/news" activeClassName='active'>新聞</NavLink>
            <NavLink to="/about" activeClassName='active'>關於</NavLink>
            <hr/>
            <h3>自定義的導航連結，稍後高亮</h3>
            <MenunLink to="/home" label="首頁"></MenunLink>
            <MenunLink to="/news" label="新聞"></MenunLink>
            <MenunLink to="/about" label="關於"></MenunLink>
            Link
            {/*path url地址*/}
            {/*component 當位址列的url地址和 path裡面的url地址匹配的時候，則component對應的元件就會渲染出來*/}
            <Route path="/home" component={Home}></Route>
            <Route path="/news" component={News}></Route>
            <Route path="/about" component={About}></Route>

            {/*Route children屬性 可以接受一個函式(函式元件)作為引數，該函式的返回值就是可以被渲染出來的內容*/}

            <Route path="/render" render={
                ()=>{
                    return (
                        <div>
                            <h2>render api 使用</h2>
                        </div>
                    )
                }
            }></Route>

            <Route path='/active' children={
                (props)=> {
                    console.log(props);
                    // 1. history 程式設計式導航使用
                    // 2. location 獲取位址列url資訊
                    // 3. match.path url地址相關
                    return (

                        <div>
                            <h2>children</h2>
                        </div>
                    )
                }

            }></Route>

        </Router>
    </div>
  );
}

export default App;

3. 路由巢狀

import React from "react";
import {BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch} from 'react-router-dom'

// 預設查詢 Home.js元件；如果找不到，則會把Home當成目錄，去該目錄下查詢index.js元件
import Home from "./components/Home/Home";
import News from "./components/News/News";
import About from "./components/About/About";
import NotFound from "./components/NotFound";


// 函式式元件裡面完成 spa 應用。需要引入幾個元件。
function App() {
    return (

        <div>
            <Router>

                <h2>路由巢狀</h2>
                <NavLink to="/home" activeClassName="active">首頁</NavLink>
                <NavLink to="/news" activeClassName="active">新聞</NavLink>
                <NavLink to="/about" activeClassName="active">關於</NavLink>
                <hr/>
                <Switch>
                    {/*switch 在使用的，找到即停止*/}
                    {/*http://localhost:3000/#/abousdfdsafasdfas*/}
                    {/*exact 代表是要做精準匹配 path 和 位址列的url地址完全的一致*/}
                    <Route exact path="/" component={Home}></Route>

                    <Route path="/home" component={Home}></Route>
                    <Route path="/news" component={News}></Route>
                    <Route path="/about" component={About}></Route>

                    <Route path="/notfound" component={NotFound}></Route>

                    {/*定義一條 404 規則*/}
                    <Redirect from="*" to="/notfound"></Redirect>
                </Switch>
            </Router>
        </div>

    );
}

export default App;