react-router-dom 路由组件基本使用

2021-02-19 0 By admin

React 开发PC端前端工程过程中使用 react-router-dom 组件做前端路由。这里介绍react-router-dom 组件的基本使用方式和动态传参。

一、react-router-dom 基本使用方式

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
// import logo from './logo.svg';
import './App.css';
import About from './views/About'
import Home from './views/Home'
import Person from './views/Person'

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/person">Person</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/person">
            <Person />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

1.1、路由的另外写法

  <Switch>
      <Route exact path="/" component={Home}></Route>
      <Route path="/about" component={About}></Route>
      <Route path="/person/:id" component={Person}></Route>
      <Route component={NotFind}></Route>
  </Switch>

其中的exact表示的是精确匹配;如果没有写精确匹配的话,那么后面的所有路径都可以匹配到首页,解决方式就是增加 exact 或者将此路由放置最后面。

二、Route动态传参

在一个路由匹配组件上设置参数,比如说上面的Person组件

<Route path="/person/:id" component={Person}></Route>

设置是以 : 开始然后紧跟key值,然后我们在Person组件中就可以通过获取props获取这个参数值。

2.1、class 方式接受参数

import React from 'react';
export default class Person extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props.match.params.id)
  }
  render() {
    const id = this.props.match.params.id
    return (
      <div>
        <h2>个人中心页面</h2>
        <p>个人id是:{id}</p>
      </div>
    )
  }
}

2.2、hooks 方式接受参数

import React from 'react';
import { useParams } from 'react-router-dom'
const Person = () => {
    const { id } = useParams();
    return (
      <div>
        <h2>个人中心页面</h2>
        <p>个人id是:{id}</p>
      </div>
    )
}