React Router(react-router-dom V6 整理)

// App.js

// 导入 Route, Routes 组件
import { Route, Routes } from 'react-router-dom';

function App() {
  return (
    
	  {/* 页面默认导航到 Home 组件(页面上显示 Home Compontent) */}
      } />
	  {/* 在地址输入 http://localhost:3000/about 导航到 About 组件(页面上显示 About Compontent) */}
      } />
    
  );
}

const Home = (props) => {
  return 
Home Compontent
;
}

const About = (props) => {
  return 
About Compontent
;
}

export default App;

// App.js

import { Route, Routes } from 'react-router-dom';

function App() {
  return (
    
      } />
      } />
      {/* 当没有其他路由与 URL 匹配时，匹配 path='*'的路由 */}
      } />
    
  );
}

const Home = (props) => {
  return 
Home Compontent
;
}

const About = (props) => {
  return 
About Compontent
;
}

const NotFount = (props) => {
  return 
NotFount !!!
;
}

export default App;

// App.js

// 导入 Link 组件
import { Route, Routes, Link } from 'react-router-dom';

function App() {
  return (
    
	  {/* 页面默认导航到 Home 组件(渲染 Home 组件, 页面显示 About Compontent 链接) */}
      } />
      } />
    
  );
}

const Home = (props) => {
  return 

    {/* 点击 About Link 链接跳转至 http://localhost:3000/about
        画面显示 About 组件内容(Home Link链接)
      */}
    About Link
  
;
}

const About = (props) => {
  return 

    {/* 点击 Home Link 链接跳转至 http://localhost:3000/
        画面显示 Home 组件内容(About Link链接)
      */}
    Home Link
  
;
}

export default App;

// App.js

// 导入 Link, Outlet 组件
import { Route, Routes, Link, Outlet } from 'react-router-dom';

function App() {
  return (
    
      } >
        } />
        } />
        {/* 默认子路由
            如果导航栏地址为 http://localhost:3000，此时子路由渲染位置(Outlet)为空白,
            增加以下配置，子路由渲染位置(Outlet)渲染 
         */}
        } />
      
    
  );
}

const Home = (props) => {
  return <>
    

      About Link | {" "}
      Setting Link
    
    

      {/* Outlet 为嵌套子路由的出口，比如：点击 About Link 链接，
          浏览器地址变为 http://localhost:3000/about
          在此渲染路由地址为 /about 的组件(在此显示: About Compontent)
       */}
      
    
  ;
}

const About = (props) => {
  return 

    About Compontent
  
;
}

const Setting = (props) => {
  return 

    Setting Compontent
  
;
}

const List = (props) => {
  return 

    List Compontent
  
;
}

export default App;

// App.js

// 导入 NavLink 组件
import { Route, Routes, NavLink, Outlet } from 'react-router-dom';

function App() {
  return (
    
      } >
        } />
        } />
        } />
      
    
  );
}

const Home = (props) => {
  return <>
    

      {/*  接收一个style 或者 className 属性
          属性值为一个回调函数，可以通过 isActive 的值判断
          链接是否处于活动状态，从而实现给活动链接节点添加样式的效果
          示例效果：点击哪个链接，目标链接字体变红
       */}
       navColor(isActive)}
        to='/about'
      >
        About Link
       | {" "}
       navColor(isActive)}
        to='/setting'
      >
        Setting Link
      
    
    

      
    
  ;
}

const About = (props) => {
  return 

    About Compontent
  
;
}

const Setting = (props) => {
  return 

    Setting Compontent
  
;
}

const List = (props) => {
  return 

    List Compontent
  
;
}

const navColor = (isActive) => {
  return {color: isActive ? 'red' : ""}
}

export default App;

// 导入 useParams 组件
import { Route, Routes, NavLink, Outlet, useParams } from 'react-router-dom';

function App() {
  return (
    
      } >
        } >
          } />
        
      
    
  );
}

const Home = (props) => {
  return <>
    

       navColor(isActive)}
        to='/list'
      >
        List Link
      
    
    

      
    
  ;
}

const Item = (props) => {
  // 从 URL 获取参数：:id
  const params = useParams();
  return 
Item: {params.id}
;
}

const List = (props) => {
  const list = [
    {
      name: "赵云",
      no: 100
    },
    {
      name: "马超",
      no: 101
    }
  ]
  return 

    {list.map((item) => {
      return ( navColor(isActive)}
        to={`/list/${item.no}`}
        key={item.no}
      >
        {item.name}
      )
    })}
    

      {/* 指定子路由 /list/? 的渲染位置 */}
      
    
  
;
}

const navColor = (isActive) => {
  return {
    color: isActive ? 'red' : "",
    marginRight: '10px'
  }
}

export default App;