React-router路由实践

最新推荐文章于 2024-08-07 08:45:40 发布
最新推荐文章于 2024-08-07 08:45:40 发布
阅读量4k 收藏 1
点赞数
分类专栏： ReactJs

1. Router,hashHistory,Route

首先下载react-router

$ npm install react-router --save

需要注意的是，react-router更新很快，API也在持续升级，也许你看到市面很多教程，但可能那还是1.x甚至是0.x版本的。

我们首先在App.jsx写一个简单示例，让你快速的对react-router有印象。

代码清单：app/container/App/App.jsx

import React, { Component } from 'react';
import { Router, Route, hashHistory } from 'react-router';

const Home = () => <div><h1>Home</h1></div>;
const About = () => <div><h1>About</h1></div>;
const Contact = () => <div><h1>Contact</h1></div>;

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    );
  }
}

export default App;

2. Link

Link是react-router提供的导航组件，可以直接使用进行路由切换

代码清单：app/container/App/App.jsx

import React, { Component } from 'react';
import { Router, Route, hashHistory, Link } from 'react-router';

const Home = () => <div><h1>Home</h1><Links /></div>;
const About = () => <div><h1>About</h1><Links /></div>;
const Contact = () => <div><h1>Contact</h1><Links /></div>;

const Links = () =>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    );
  }
}

export default App;

3. browserHistory

browserHistory和hashHistory不一样，使用browserHistory的时候，浏览器中导航栏的URL就不会出现_k的hash键值对。实际项目中也一般用browserHistory.

import React, { Component } from 'react';
import { Router, Route, browserHistory, Link } from 'react-router';

const Home = () => <div><h1>Home</h1><Links /></div>;
const About = () => <div><h1>About</h1><Links /></div>;
const Contact = () => <div><h1>Contact</h1><Links /></div>;

const Links = () =>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    );
  }
}

export default App;

这样正常点击路由切换没有问题，但是重新刷新URL就会报找不到路由，这个时候我们在webpack-dev-server启动的时候需要加上参数--history-api-fallback。

4. activeStyle,activeClassName

当前路由被点击处于触发显示状态的时候，我们可以使用activeStyle来给路由设置一些颜色。

import React, { Component } from 'react';
import { Router, Route, browserHistory, Link } from 'react-router';

const Home = () => <div><h1>Home</h1><Links /></div>;
const About = () => <div><h1>About</h1><Links /></div>;
const Contact = () => <div><h1>Contact</h1><Links /></div>;

const Links = () =>
  <nav>
    <Link activeStyle={{color: 'red'}} to="/">Home</Link>
    <Link activeStyle={{color: 'red'}} to="/about">About</Link>
    <Link activeStyle={{color: 'red'}} to="/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    );
  }
}

export default App;

同理，我们还可以使用activeClassName来将路由激活状态的样式抽取出来。

我们在App.css写一个样式，代码清单：app/containers/App/App.jsx

.active {
  color: red;
}

然后修改App.jsx

import React, { Component } from 'react';
import { Router, Route, browserHistory, Link } from 'react-router';

import './App.css';

const Home = () => <div><h1>Home</h1><Links /></div>;
const About = () => <div><h1>About</h1><Links /></div>;
const Contact = () => <div><h1>Contact</h1><Links /></div>;

const Links = () =>
  <nav>
    <Link activeClassName="active" to="/">Home</Link>
    <Link activeClassName="active" to="/about">About</Link>
    <Link activeClassName="active" to="/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    );
  }
}

export default App;

5. 路由嵌套

刚才讲的是简单路由的切换，但实际应用中，路由是分多个层级的。幸运的是，我们可以使用react-router的路由嵌套来清晰的管理路由和组件之间的切换展示。

import React, { Component } from 'react';
import { Router, Route, browserHistory, Link } from 'react-router';

import './App.css';

const Home = (props) =>
  <div>
    <h1>Home</h1>
    <Links />
    {props.children}
  </div>

const About = (props) =>
  <div>
    <h1>About</h1>
    {props.children}
  </div>

const Contact = () =>
  <div>
    <h1>Contact</h1>
  </div>

const Links = () =>
  <nav>
    <Link activeClassName="active" to="/">Home</Link>
    <Link activeClassName="active" to="/about">About</Link>
    <Link activeClassName="active" to="/about/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/" component={Home}>
          <Route path="about" component={About}>
            <Route path="contact" component={Contact} />
          </Route>
        </Route>
      </Router>
    );
  }
}

export default App;

6. IndexRoute

IndexRoute即处理页面初始进入时候的组件展示，等路由切换的时候，再根据其他路由规则进行组件的切换展示。

import React, { Component } from 'react';
import { Router, Route, browserHistory, Link, IndexRoute } from 'react-router';

import './App.css';

const Home = (props) =>
  <div>
    <h1>Home</h1>
    <Links />
    {props.children}
  </div>

const About = () =>
  <div>
    <h1>About</h1>
  </div>

const Contact = () =>
  <div>
    <h1>Contact</h1>
  </div>

const Links = () =>
  <nav>
    <Link activeClassName="active" to="/">Home</Link>
    <Link activeClassName="active" to="/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/" component={Home}>
          <IndexRoute component={About} />
          <Route path="contact" component={Contact} />
        </Route>
      </Router>
    );
  }
}

export default App;

7. 路由变量

刚才展示的是常规的路由，路由中的规则是给定的，现在我们尝试使用路由变量，在组件中获取这个路由的变量，并做相应的组件展示。

import React, { Component } from 'react';
import { Router, Route, hashHistory, Link, IndexRoute } from 'react-router';

import './App.css';

const Message = (props) =>
  <div>
    <h1>{props.params.message || 'Hello'}</h1>
    <Links />
  </div>

const Links = () =>
  <nav>
    <Link to="/">Hello</Link>
    <Link to="/yong">Yong</Link>
    <Link to="/feng">Feng</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/(:message)" component={Message} />
      </Router>
    );
  }
}

export default App;

8. Route中components参数的高级用法

Route中components中接收的参数不仅仅只是实际的组件，还可以是对象，通过这样的用法，我们可以更灵活的控制组件的展示。

import React, { Component } from 'react';
import { Router, Route, hashHistory, Link, IndexRoute } from 'react-router';

import './App.css';

const HomeHeader = () => <h1>HomeHeader</h1>
const HomeBody = () => <h1>HomeBody</h1>
const AboutHeader = () => <h1>AboutHeader</h1>
const AboutBody = () => <h1>AboutBody</h1>

const Container = (props) =>
  <div>
    {props.header}
    {props.body}
    <Links />
  </div>

const Links = () =>
  <nav>
    <Link to="/">Hello</Link>
    <Link to="/about">About</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Container}>
          <IndexRoute components={{ header:HomeHeader, body:HomeBody }} />
          <Route path="about" components={{ header:AboutHeader, body:AboutBody }} />
        </Route>
      </Router>
    );
  }
}

export default App;

9. 使用query获取URL中的参数

我们可以将URL中访问的参数获取，并且应用到组件中。

import React, { Component } from 'react';
import { Router, Route, hashHistory, Link, IndexRoute } from 'react-router';

import './App.css';

const Page = (props) =>
  <div>
    <h1>{props.location.query.message || 'Hello'}</h1>
  </div>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Page} />
      </Router>
    );
  }
}

export default App;

然后在url中输入http://localhost:8080/#/?message=guoyongfeng，页面中就会显示guoyongfeng。

另外，我们还可以在Link组件中设置pathname和query变量

import React, { Component } from 'react';
import { Router, Route, hashHistory, Link, IndexRoute } from 'react-router';

import './App.css';

const Page = (props) =>
  <div>
    <h1>{props.location.query.message || 'Hello'}</h1>
  </div>

const Links = () =>
  <nav>
    <Link to={{ pathname: "/", query: {message: "guoyongfeng"} }} />
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Page} />
      </Router>
    );
  }
}

export default App;

10. Redirect重定向

import React, { Component } from 'react';
import { Router, Route, hashHistory, Link, Redirect } from 'react-router';

const Home = () => <div><h1>Home</h1><Links /></div>;
const About = () => <div><h1>About</h1><Links /></div>;
const Contact = () => <div><h1>Contact</h1><Links /></div>;

const Links = () =>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/contact">Contact</Link>
    <Link to="/contact-us">Contact US</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact-us" component={Contact} />
        <Redirect from="/contact" to="/contact-us" />
      </Router>
    );
  }
}

export default App;

11. setRouteLeaveHook路由钩子函数：处理路由切换时的操作

import React, { Component, PropTypes } from 'react';
import { Router, Route, hashHistory, Link } from 'react-router';

class Home extends Component {
  componentWillMount(){
    this.context.router.setRouteLeaveHook(
      this.props.route,
      this.routerWillLeave
    )
  }
  routerWillLeave( nextLocation ){
    return `页面即将从Home切换到${nextLocation.pathname}`
  }
  render(){
    return <div>
      <h1>Home</h1>
      <Links />
    </div>
  }
}

Home.contextTypes = {
  router: PropTypes.object.isRequired
};

const Contact = () => <div><h1>Contact</h1><Links /></div>;

const Links = () =>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Home} />
        <Route path="/contact" component={Contact} />
      </Router>
    );
  }
}

export default App;

结语

总的来说，react-router的学习难度不高，但是会有不同版本间API升级的坑，后续大家持续关注，或是使用某一个自己熟悉的react-router版本。

参考资料

Mr_linjw
关注
专栏目录
手写 React-Router（Hook版）
yuan_me_da的博客
03-20 622
文章目录Hook 实现router组件思想手写 BrowserRouter手写 Link手写 Route 参考文档： react-router git react-router Hook 实现router 组件思想 根据运行环境安装react-router-dom，它依赖react-router，安装会自动安装react-router。 react-router 中奉行一切皆组件的思想。 路...
react-router
weixin_33711641的博客
05-17 102
2019独角兽企业重金招聘Python工程师标准>>> ...
推荐10个实用的 React 自定义hooks
最新发布
程序员成长指北
08-07 173
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群什么是自定义 hook？在 React 中，自定义 hook 是一个利用一个或多个内置 hook（如 useState、useEffect、useContext 等）的 JavaScript 函数。自定义 hook 提供了一种提取和共享 React 组件逻辑的方法，促进代码的清晰、组织的改善和生...
Reactjs路由
weixin_45348067的博客
04-22 187
BrowserRouter：浏览器的路由方式，也就是在开发中最常使用的路由方式 React Router 是建立在history上的。 即：一个history知道如何去监听浏览器地址栏的变化，并解析这个URL转化为 location 对象，然后 router 使用它匹配到路由，之后正确的渲染出对应的组件。 来一些例子解析一下 首先在终端安装 yarn add react-router-dom -S...
面向初学者的简单React JS路由
weixin_26748899的博客
10-12 199
One of the key parts of the modern single page application (SPA) is routing; determining what should show when a user visits a certain page in the application.路由是现代单页应用程序(SPA)的关键部分之一。 确定当用户访问应用程序中的特定页...
React-Router Hooks
前端精髓
05-25 1417
Route 写法1 <Route path="/child"> <Child /> </Route> // 类似 <Route path="/child" children={<Child />}></Route> children 组件使用一个特殊的 children prop 来将 Route 的子组件传递到渲染结果中。 写法2 <Route path="/child" component={Child}>&l
koa-react-router：用于koa 2的react-router中间件
02-03
koaReact路由器 koa 2中间件，用于React... import reactrouter from 'koa-react-router' ; import App from './App' ; import Container from './containers/PageContainer' ; const app = new Koa ( ) ; app
react-router:react-router 中文文档
04-29
React Router Declarative routing for 文档 Packages 这个存储库是我们使用管理的monorepo。 这意味着我们实际上从相同的代码库发布了几个包到npm，包括: Package Version Docs Description React Router的核心 ...
mobx-react-router:使MobX状态与react-router保持同步
04-22
通过RouterStore使MobX状态与react-router保持同步。 路由器的位置状态是可观察到的，因此在MobX组件中对其进行的任何引用都会在位置更改时使组件重新呈现。 非常受启发（并复制自） 。 该分支（主节点）与react-...
关于react-router/react-router-dom v4 history不能访问问题的解决
11-28
在React应用中，React Router是一个强大的路由库，用于管理页面间的导航。在本文中，我们将深入探讨一个关于`react-router-dom` v4版本中的`history`对象无法访问的问题及其解决方案。 在升级到`react-router-dom` ...
使用React-Router实现前端路由鉴权的示例代码
11-20
React-Router 是React生态系统中的关键组件，用于在前端管理单页应用（SPA）的路由。在传统的Web应用中，路由通常由服务器控制，但随着SPA的流行，前端开始负责处理路由，以提供更流畅的用户体验。React-Router 提供...
react-router4.2使用js控制路由跳转的3种方式
02-12
react技术是目前流行UI开发框架，是facebook的开源的开发技术
React router之hooks
weixin_43604021的博客
09-28 1155
React router hooks
reactjs路由：react-router-dom安装及路由代码示例
学亮编程手记
11-21 90
这只是 React 路由的基本用法示例，React Router 还提供了更多功能和配置选项，如嵌套路由、路由参数等。React Router 是一个基于 React 的第三方库，提供了一组用于处理路由的组件和 API。这样，当用户点击导航栏中的链接时，React 路由会根据当前的 URL 路径匹配对应的路由规则，并渲染相应的页面组件。接下来，我们可以在应用程序的根组件中设置路由。在上面的示例中，我们首先导入了所需的组件和 API，包括。组件来定义路由规则，并在匹配到对应路由时渲染相应的组件。
react-router6常规路由器、hook详解
局外人LZ的博客
03-25 1557
react-router 是一个用于处理 React 应用程序中路由管理的库，它提供了一种简单而强大的方式来实现单页面应用程序（SPA）中的路由控制。通过react-router，可以轻松地定义应用程序的不同路由，使用户能够在应用程序中浏览不同的页面或视图。
react-router6新特性数据路由器、hook详解
局外人LZ的博客
03-26 994
react-router 是一个用于处理 React 应用程序中路由管理的库，它提供了一种简单而强大的方式来实现单页面应用程序（SPA）中的路由控制。通过 react-router，可以轻松地定义应用程序的不同路由，使用户能够在应用程序中浏览不同的页面或视图。数据路由器比普通的路由器支持加载器、操作、提取器等功能。
十一、【React-Router6】Hooks 汇总
天行健，君子以自强不息
12-03 1070
useRoutes()、useNavigate()、useParams()、useSearchParams()、useLocation()、useMatch()、useInRouterContext()、useNavigationType()、useOutlet()、useResolvedPath()
陌笛-react.js路由
m0_70846476的博客
05-30 157
web应⽤的路由 路由的概念 https://news.163.com/world/index.html https://xxx.163.com/xx/index.php ... 访问过程为 浏览器发出请求 服务器监听到80端⼝（或443）有请求过来，并解析url路径 根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图⽚等） 浏览器根据数据包的Content-Type来决定如何解析数据 简单来说路由就是⽤来跟后端服务器进⾏交互的⼀种⽅式，通过不同的路径，来请求不
react.js从入门到精通（六）——路由的使用
追梦猪的博客
08-27 190
web端三大框架react、vue和angular，本篇教程介绍react的从入门到精通。九、对路由的理解在pc端页面之间的切换，我们要使用a标签来实现在react.js开发中，我们采用组件化操作，一个页面就是一个组件。所以页面和页面之间的跳转就相当于是组件和组件之间的跳转。我们知...
react-router路由拦截教程
06-07
React Router 提供了一些钩子函数来拦截路由，这样我们就可以在路由跳转之前或之后进行相关的操作。下面是一个简单的路由拦截示例： ```javascript import React from 'react'; import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom'; const isAuthenticated = true; const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={(props) => ( isAuthenticated === true ? <Component {...props} /> : <Redirect to='/login' /> )} /> ); const LoginPage = () => ( <div> <h1>Login Page</h1> </div> ); const HomePage = () => ( <div> <h1>Home Page</h1> </div> ); const App = () => ( <Router> <div> <ul> <li><Link to='/'>Home</Link></li> <li><Link to='/login'>Login</Link></li> </ul> <hr /> <PrivateRoute exact path='/' component={HomePage} /> <Route path='/login' component={LoginPage} /> </div> </Router> ); export default App; ``` 在上面的代码中，我们定义了一个 `PrivateRoute` 组件来实现路由拦截。如果用户已经认证，则展示 `component` 组件，否则重定向到登录页面。 另外，我们还定义了两个页面组件：`HomePage` 和 `LoginPage`。在 `App` 组件中，我们使用 `PrivateRoute` 组件来保护 `HomePage` 组件，这样只有已经认证的用户才能访问该页面。 如果你想在路由跳转之前进行相关的操作，可以使用 `react-router` 提供的 `Prompt` 组件。下面是一个简单的示例： ```javascript import React, { useState } from 'react'; import { BrowserRouter as Router, Route, Link, Prompt } from 'react-router-dom'; const App = () => { const [isBlocking, setIsBlocking] = useState(false); const handleChange = (event) => { setIsBlocking(event.target.value.length > 0); }; return ( <Router> <div> <ul> <li><Link to='/'>Home</Link></li> <li><Link to='/about'>About</Link></li> </ul> <hr /> <Prompt when={isBlocking} message={location => `Are you sure you want to go to ${location.pathname}?`} /> <Route exact path='/' render={() => ( <div> <h1>Home Page</h1> <input type='text' onChange={handleChange} /> </div> )} /> <Route path='/about' render={() => ( <div> <h1>About Page</h1> </div> )} /> </div> </Router> ); }; export default App; ``` 在上面的代码中，我们使用 `Prompt` 组件来拦截路由，在用户输入内容时，如果尚未保存，就弹出提示框。提示框的内容可以通过 `message` 属性来设置。如果用户选择离开当前页面，则路由会跳转到目标页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值