React中的路由react-router

Router 的基本使用！

我们需要npm 下载react-router：

npm install react-router --save

BrowserRouter或HashRouter

• Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件；
• BrowserRouter使用history模式；
• HashRouter使用hash模式；

Link和NavLink

• 通常路径的跳转是使用Link组件，最终会被渲染成a元素；
• 是在Link基础上增加了一些样式属性；
• Link中最重要的属性，用于设置跳转到的路径；

Route

• Route用于路径的匹配；
• path属性：用于设置匹配到的路径；
• element属性：设置匹配到路径后，渲染的组件；
• exact：精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件；

创建第一个路由：
要使用react-router 创建第一个路由 首先我们需要在 总入口文件里引入：

import { BrowserRouter } from 'react-router-dom'  //引入react-router-dom模块包  包裹根目录App

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>

  </React.StrictMode>,
  document.getElementById('root')
);

这是从 react-router-dom 库导入的第一个组件。它用于包装不同的路线，它使用HTML5 history API来跟踪React应用程序中的路由历史记录。

之后我们在 App.js 文件里 引用该下列方法：
我们需要 使用Routes 包裹住Route 来注册路由
Route 里面path属性是路径，element是该路径所对应的组件。

//引入Routes包裹Route  Route设置路由  Link跳转路径，相当于a标签
import { Routes, Route, Link, NavLink } from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <Routes>
        {/* 通过定义route内的path和element，确定每一个路径path对应的组件element */}
        <Route path='/' element={<Home />} /

        <Route path='/newone' element={<Newone />} />

        {/* 如果路径地址不存在的话 */}
        <Route path='*' element={<NotFound />} />

        <Route path='/about' element={<About />}>
          {/* 默认路由 */}
          <Route path='' element={<Dz />} />
          {/* 二级路由 about的子路由 */}
          <Route path='/about/address' element={<Dz />} />
          <Route path='/about/yhq' element={<Yhq />} />
          {/* 如果路径地址不存在的话 */}
          <Route path='*' element={<NotFound />} />
        </Route>

      </Routes>

    </div>
  );
}

export default App;

下面使用 NavLink 进行一个跳转 相当于a标签：

<NavLink to="/">首页</NavLink>
<NavLink to="/about">about页</NavLink>

跳转路由：
当然，我们也可以跳转路由，但是我们react 不想vue那样使用 push，go，replace进行一个跳转；
我们需要 引入 useNavigate 方法，注意 我们这里使用这些api方法，必须在函数式组件内使用；
请看以下代码片段：

//跳转路由
import { useNavigate } from 'react-router-dom'

function Home() {
    //使用引入的useNavigate方法  声明一个对象
    let navigate = useNavigate()
    return (
        <div>
            我是home组件
            {/* 跳转路由的按钮 */}
            <input type="button" value="跳转about组件" onClick={() => { navigate('/about') }} />
        </div>
    )

}
export default Home;