重温react-12(HashRouter和BrowserRouter和路由导航NavLink)

安装依赖

npm i react-router-dom

出口文件代码(index.js)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter,BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  // <React.StrictMode>
  //   <BrowserRouter>
  //     <App />
  //     </BrowserRouter>
  // </React.StrictMode>
  <React.StrictMode>
    <HashRouter>
      <App />
      </HashRouter>
  </React.StrictMode>
);
reportWebVitals();

上面有两种路由模式,HashRouter和BrowserRouter模式。

App.js中的代码

import React from 'react';
import { Routes, Route, Link,NavLink } from 'react-router-dom';
import Home from './Home/Home'
import About from './About/About'
import News from './News/News'
export default function BoxReact() {
  return (
    <>
      <Routes>
        <Route path='/' element={<Home></Home>}></Route>
        <Route path='/about' element={<About></About>}></Route>
        <Route path='/news' element={<News></News>}></Route>
      </Routes>
    </>
  )
}

输入不同的路径就可以展示不同的页面代码。这样是极其的不方便,需要一个路由导航.

link和NavLink

react-router-dom中提供了Link和NavLink两种导航.最主要的区别就是NavLink提供了一个active的激活类。方便加上激活色等操作。

代码

import React from 'react';
import { Routes, Route, Link,NavLink } from 'react-router-dom';
import Home from './Home/Home'
import About from './About/About'
import News from './News/News'
export default function BoxReact() {
  return (
    <>
      {/* <Link to="/">首页</Link>
      <Link to="/about">关于页</Link>
      <Link to="/news">新闻页面</Link> */}
      <NavLink to="/">首页</NavLink>
      <NavLink to="/about">关于页</NavLink>
      <NavLink to="/news">新闻页面</NavLink>
      <Routes>
        <Route path='/' element={<Home></Home>}></Route>
        <Route path='/about' element={<About></About>}></Route>
        <Route path='/news' element={<News></News>}></Route>
      </Routes>
    </>
  )
}

两种方式两种选择,很是方便.