react系列学习（五）——react-router-dom5.X的使用及相关问题详解

1、例子界面如下图：2、代码：2.1、主页面：import { HashRouter, Route, Switch, Link, Redirect } from 'react-router-dom';<HashRouter><div className="App">hello react<br /><Link to='/redux'><span

lixiaonaaa

1223人浏览 · 2020-12-14 15:58:45

lixiaonaaa · 2020-12-14 15:58:45 发布

1、例子界面如下图：

2、代码：

2.1、主页面：

import { HashRouter, Route, Switch, Link, Redirect } from 'react-router-dom';
<HashRouter>
   <div className="App">
       hello react
       <br />
       <Link to='/redux'>
         <span>redux示例</span>
       </Link>
       <Link to='/reduxRedux'>
          <span>react-redux示例</span>
       </Link>
       <Link to='/topics'>
          <span>router嵌套示例</span>
       </Link>
       <Switch> 
         <Route path='/redux' exact >
            <Account />
         </Route>
         <Route path='/reduxRedux' exact >
            <AccoutRedux />
         </Route>
         <Route path='/topics'>
            <Topics />
         </Route>
         //重定向
         <Redirect to="/redux" from='/' exact /> 
      </Switch>
   </div>
</HashRouter>

2.2、嵌套路由

Topics.js组件

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";
import Topic from '../Topic';

function Topics() {
  let match = useRouteMatch();
  console.log('match =>',match);

  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>
            Props v. State
          </Link>
        </li>
      </ul>

      {/* The Topics page has its own <Switch> with more routes
          that build on the /topics URL path. You can think of the
          2nd <Route> here as an "index" page for all topics, or
          the page that is shown when no topic is selected */}
      <Switch>
        <Route path={`${match.path}/:topicId`}>
          <Topic />
        </Route>
        <Route path={match.path}>
          <h3>Please select a topic.</h3>
        </Route>
      </Switch>
    </div>
  );
}
export default Topics;

2.3、Topic.js组件

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";

function Topic() {
  let { topicId } = useParams();
  return <h3>Requested topic ID: {topicId}</h3>;
}

export default Topic;

3、exact:bool

完全(严格)匹配。嵌套路由时不要用，比如上述例子 <Route path='/topics'><Topics /></Route>，如果用了exact，则匹配不到‘/topicc/:topicId’。因为先从一级路由开始匹配。

4、NavLink

Link的升级版，可设置链接高亮。默认加“active”类名，如果要改变类名，可加“activeClassName="xxx"”。

5、封装NavLink

import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'

export default class MyNavLink extends Component {
	render() {
		// console.log(this.props);
		return (
			<NavLink activeClassName="atguigu" className="list-group-item" {...this.props}/>
		)
	}
}


//使用方法
<MyNavLink to="/home">Home</MyNavLink>

说明：

1）标签体内容，可以通过props接收，key值为children，即props.children

2）标签体内容也是特殊的标签属性

<NavLink activeClassName="atguigu" className="list-group-item">{this.props.children}</NavLink>
//等同于
<NavLink activeClassName="atguigu" className="list-group-item" children={this.props.children}/>

6、Switch的作用

1）通常情况下，path和component是一一对应关系

2）Switch可以提高路由匹配效率（单一匹配）

通俗的讲，可以理解为：Switch用于匹配到路由后，不会再向下继续匹配

7、解决多级路径刷新页面样式丢失的问题

1）.public/index.html 中引入样式时不写 ./ 写 / （常用）

2）.public/index.html 中引入样式时不写 ./ 写 %PUBLIC_URL% （常用）

3）.使用HashRouter

8、向路由组件传递参数

1）.params参数

路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>

注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>