reactRouter6路由组件

phaple

已于 2023-01-19 13:41:34 修改

阅读量76

点赞数

分类专栏： reactRouter6 文章标签： reactjs typescript Powered by 金山文档

于 2023-01-18 16:45:14 首次发布

本文链接：https://blog.csdn.net/phaple/article/details/128727166

版权

reactRouter6 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用ReactRouter进行页面路由管理，包括设置BrowserRouter作为应用入口，定义嵌套的Routes和Route组件来处理不同路径，以及使用NavLink和Link进行导航，并展示了如何利用isActive属性为当前活动链接添加样式。

摘要由CSDN通过智能技术生成

参考资料

中文->http://www.reactrouter.cn/docs/getting-started/tutorial

英文->https://reactrouter.com/en/6.6.2

首页包裹路由

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from './App'

ReactDOM.render(
  <BrowserRouter>
    {/* The rest of your app goes here */}
    <App />
  </BrowserRouter>
);

嵌套路由

import { Routes, Route } from "react-router-dom";
import News from 'page/hihi/news'
import Tools from 'page/hihi/tools'

const App = () => {
  return(
    <div>
      路由：
      <Routes>
            <Route path="hihi/news" element={<News />} />
            <Route path="hihi/tools" element={<Tools />} />
            <Route
                path="*"
                element={
                <>404</>
                }
            />
      </Routes>
    </div>
  )
}


export default App

NavLink和Link

import React from 'react';
import { NavLink, Link } from "react-router-dom";

const layOutRoutes = () => {
    return (
        <>
            <NavLink to="/hihi/news">新闻</NavLink>
            <NavLink to="/hihi/tools">工具</NavLink>
            <Link to="/hihi/news">新闻</Link>
            <Link to="/hihi/tools">工具</Link>
        </>
    )
}

export default React.memo(layOutRoutes);

发现Navlink随着路由变化会自带active类，而Link没有

可以通过isActive来给样式高亮

<NavLink className={({ isActive }) => isActive ? "red" : "blue"}  to="/hihi/news">新闻</NavLink>
            <NavLink className={({ isActive }) => isActive ? "red" : "blue"}  to="/hihi/tools">工具</NavLink>