react-router-dom简介(推荐)

npm install react-router-dom -S
// 或者
yarn add react-router-dom  

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "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;

  <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>

<Route exact path="/" component={Home}></Route>

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

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>
    )
  }
}

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

import React from 'react';
import { Link, Switch, Route } from 'react-router-dom'
import Tshirt from './product/Tshirt';
import Jeans from './product/Jeans'
export default class About extends React.Component {
  constructor(props) {
    super(props)
    console.log(this.props.match)
  }
  render() {
    const match = this.props.match;
    return (
      <>
    <nav>
      <Link to={`${match.url}/tshirt`}>Tshirt</Link>| 
      <Link to={`${match.url}/jeans`}>Jeans</Link>
    </nav>
    <Switch>
      <Route path={`${match.path}/tshirt`} component={Tshirt}></Route>
      <Route path={`${match.path}/jeans`} exact component={Jeans}></Route>
    </Switch>
  </>
    )
  }
}

import { useRouteMatch } from 'react-router-dom'
const About = () => {
    const { path, url }  = useRouteMatch();
    ...省略
}

<Route exact path="/">
  {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}</Route>

import { useEffect } from "react";import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
  }

import React from "react";import { withRouter } from "react-router-dom";

class ScrollToTop extends React.Component {
  componentDidUpdate(prevProps) {
    if (
      this.props.location.pathname !== prevProps.location.pathname
    ) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return null;
  }}

function App() {
  return (
    <Router>
      <ScrollToTop />
      <App />
    </Router>
  );}

import React, { useState } from "react";
import {
  Prompt
} from "react-router-dom";
 const BlockingForm = ()=>{
  let [isBlocking, setIsBlocking] = useState(false);
  return (
    <form
      onSubmit={event => {
        event.preventDefault();
        event.target.reset();
        setIsBlocking(false);
      }}
    >
      <Prompt
        when={isBlocking}
        message={location =>
          `你是否要跳转到 ${location.pathname}`
        }
      />
      <p>
        Blocking?{" "}
        {isBlocking ? "Yes, click a link or the back button" : "Nope"}
      </p>
      <p>
        <input
          size="50"
          placeholder="输入值测试路由拦截"
          onChange={event => {
            setIsBlocking(event.target.value.length > 0);
          }}
        />
      </p>
      <p>
        <button>提交表单模拟接触拦截</button>
      </p>
    </form>
  );
}
export default BlockingForm;

{
  "presets": ["@babel/preset-react"],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

import React from 'react';
import loadable from '@loadable/component';
const BlockForm = loadable(() => import('../pages/BlockForm/index'), {
  fallback: <Loading />
})

import React from "react";import PropTypes from "prop-types";import { withRouter } from "react-router";

// A simple component that shows the pathname of the current locationclass ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }}

// Create a new component that is "connected" (to borrow redux// terminology) to the router.const ShowTheLocationWithRouter = withRouter(ShowTheLocation);