React路由使用详解

最新推荐文章于 2025-06-05 20:08:17 发布

整日发愁

最新推荐文章于 2025-06-05 20:08:17 发布

阅读量1.2k

点赞数

文章标签： react reactjs

本文链接：https://blog.youkuaiyun.com/weixin_57180500/article/details/124083045

版权

本文详细介绍了React路由的使用，包括安装、导入组件、创建页面、配置路由、参数传递、子路由设置、404页面处理以及路由守卫的实现。通过实例展示了如何在React应用中实现导航和权限控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装路由

打开cmd
在项目文件夹安装:npm i react-router-dom@5.0 -S(指定5.0版本)

导入路由的相关组件

在app.js中添加路由，导入

import {
  HashRouter as Router,    //HashRouter哈希路由 as起别名 router路由
  Route,                   //Route 存放路由的容器
  NavLink,                 //navlink 导航链接
  Redirect,                // Redirect 重定向
  Switch,                  // Switch一次匹配一个页面
} from "react-router-dom";

创建两个路由页面

首页页面:

//创建首页
function Home(){
    return (<div>
        <h1>首页内容</h1>
</div>);
}
export default Home;

分支路由页面:

function About(){
    return (<div>
        <h1>关于页面内容</h1>
</div>);
}
export default About;

配置路由

在需要的页面配置：

import {
  HashRouter as Router,
  Route,
  NavLink
} from "react-router-dom";
import Home from "./Home";
import About "./About";
function App() {
  return (
    <Router>
      <div className="nav">
        <NavLink to="/" exact>首页</NavLink>|
        <NavLink to="/about">关于</NavLink>
      </div>
      <div className="views">
          <Route path="/" component={Home} exact></Route>
          <Route path="/about" component={About}></Route>
      </div>
    </Router>
  );
}
 
export default App;

路由传参

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (
<Router>
       {/*导航部分*/}
      <div className='nav'>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink> |
        <NavLink to="/details/abc">abc详情</NavLink> |
        <NavLink to="/details/123">123详情</NavLink> |
      </div>
       <div className='views'>
         <Route path='/' component={Home} exact></Route>
         <Route path='/about' component={About}></Route>
         <Route path='/details/:id' component={Details}></Route>
       </div>
</Router>);
}
export default App;

//创建详情页
function Details({match,location}){
  return (<div>
      <h1>详情内容</h1>
      <p>参数：{match.params.id}</p>
      <p>match:{JSON.stringify(match)}</p>
      <p>location:{JSON.stringify(location)}</p>
  </div>);

子路由

父路由是普通路由，在父组件中配置子路由
在子路由中配置重定向Redirect，可控制子路由默认显示页面

function Admin() {
  return (
    <div>
      <h1>Admin页面</h1>
      <p>
        <NavLink to="/admin/dash">概述</NavLink>
        <NavLink to="/admin/orderlist">订单列表</NavLink>
      </p>
      <Route path="/admin/dash" component={Dash}></Route>
      <Route path="/admin/orderlist" component={OrderList}></Route>
      <Redirect from="/admin" to="/admin/dash"></Redirect>
    </div>
  );
}

404页面

匹配任意地址，将404页面放在最后，并在外层加上组件控制只匹配一个页面。当无其他匹配页面时就显示404页面

<div className="views">
        <Switch>
          <Route path="/" component={Home} exact></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/details/:id" component={Details}></Route>
          <Route path="/admin" component={Admin}></Route>
          <Route path="*" component={NoMatch}></Route>
        </Switch>
      </div>

路由守卫

创建一个登录页面、添加Priviate权限页面

function Login({location,history}){
  function logIt(){
      // 存储到本地
      localStorage.setItem("isLog",true);
      // 获取redirect信息
      var redirect = location.state.redirect||"/";
      // 如果没有拿到就跳转到首页
      history.push(redirect);
  }
   return<div>
    <h1>登录</h1>
    <button onClick={logIt}>登录</button>
  </div>
  }