React 路由的基本使用

👁 2021-02-16

如何学会React 路由的基本使用

常见使用路由的应用场景应该就属SPA应用了吧，接下来带领大家了解路由的基本使用，小案例如下所示。

1 安装react路由插件

下载react-router-dom

npm install --save react-router-dom

2 划分组件

根据案例图分析可得，组件包括App,About,Home
之后就创建组件，首先在src目录下新建pages文件夹，一般将路由组件放在pages下。
About组件内容如下

import React, { Component } from 'react';

class About extends Component {
    render() {
        return (
            <div>
                about
            </div>
        );
    }
}

export default About;

Home组件内容如下

import React, { Component } from 'react';

class Home extends Component {
    render() {
        return (
            <div>
                home
            </div>
        );
    }
}

export default Home;

3 在App.js文件中添加代码

import React from 'react'
import {Link,Route} from 'react-router-dom'   //引入路由组件
import './App.css';
import Home from './pages/Home/Home'
import About from './pages/About/About'
class App extends React.Component{

    render(){

        return (
        <div className="container">
            <h1 className="title1">router demo</h1>
            <div className="main">
            <div className="left">
            {/* 使用Link组件编写路由链接，to属性值是路由路径 */}

                    <div><Link className="line" to="/about">about</Link></div>
                    <div><Link className="line" to="/home">home</Link></div>
            </div>
            <div className="right">
                {/* 使用Route组件注册路由，component是组件 */}
                <Route path="/about" component={About}></Route>
                <Route path="/home" component={Home}></Route>
            </div>

            </div>
        </div>
        );
    }

}

export default App;

不要忘记在index.js中添加BrowserRouter组件

import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
    <App />
</BrowserRouter>
,
document.getElementById('root')
);

4 使用NavLink

若想导航有高亮效果，可以利用NavLink组件。利用activeClassName属性导航链接背景就会高亮，该属性使用和普通的className方法一致

import {NavLink,Route} from 'react-router-dom'

<div><NavLink activeClassName="title" to="/about">about</NavLink></div>
<div><NavLink activeClassName="title" to="/home">home</NavLink></div>

5 封装NavLink

如果代码中出现很多个如下代码，可读性较差，因此，可以对NavLink进行封装

<NavLink activeClassName="title" to="/about">about</NavLink>

创建MyNavLink组件

import React, { Component } from 'react';
import {Route,NavLink} from 'react-router-dom'
class MyNavLink extends Component {
    render() {
        // const {to,title} = this.props

        return (
            <div>
                {/* <NavLink activeClassName="title" to={to}>{title}</NavLink> 如果传递的参数较多，分开写属性将会比较麻烦，推荐使用如下方式*/}
                <NavLink activeClassName="title" {...this.props} />
            </div>
        );
    }
}

export default MyNavLink;

在App.js中修改路由链接

{/* 编写路由链接 */}
<MyNavLink to="/about" title="about" a="1" b="2">About</MyNavLink>
<MyNavLink to="/home" title="home">Home</MyNavLink>

6 使用Redirect组件

使用该组件的目的在于路由重定向，一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由。
直接在注册路由最后添加Redirect组件

<Route path="/about" component={About}></Route>
<Route path="/home" component={Home}></Route>
<Redirect to="/about"></Redirect>

6 使用Switch组件

如果注册路由含有相同的，这时就可以利用Switch组件，只要匹配到了路由就不会继续向下匹配了，否则就会向下继续匹配,效率较高

<Switch>
    <Route path="/about" component={About}></Route>
    <Route path="/home" component={Home}></Route>
    <Route path="/home" component={Test}></Route>
    <Redirect to="/about"></Redirect>
</Switch>

7 路由组件与一般组件区别

1.写法不同：
    一般组件：<Demo/>
    路由组件：<Route path="/demo" component={Demo}/>
2.存放位置不同：
    一般组件存放于components
    路由组件存放于pages
3.接收到的props不同：
    一般组件：写组件标签时传递了什么，就能收到什么
    路由组件：接收到三个固定的属性:history,location,match

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2021/02/16/basic-use-of-react-routing/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------