Skip to content
{}

基础知识 - 路由

路由传参

    1. 动态路由传参

在Route组件上path属性里面以/:key的占位符写法,在<NavLink />组件 to属性上 动态拼接就可以啦。接收方:取值用 props.match.params

    1. 路由传参query | state{pathname:'路径名', query|state:{id:'',name:''}

props.history | useHistory().push方面里面传入一个对象,对象有两个属性, 一个pathname,一个 query|state, pathname 是跳转路径,query|state 是传参对象。

接收方: query 在props.location.query里面取 ,state 在props.location.state里面取

动态路由传参

<!-- list1.jsx -->
import React, { useMemo, useState } from "react";
import { NavLink ,useHistory} from "react-router-dom";
export default function List(props) {
  console.log(props);
  const [list, setlist] = useState([
    { name: "前端猛男", id: 1 },
    { name: "前端猛男2", id: 2 },
    { name: "前端猛男3", id: 3 },
  ]);

  // 动态路由传参
  const listView = useMemo(() => {
    return list.map((item) => {
      return (
        <li key={item.id}>
          {/*动态路由传参*/}
          <NavLink
            to={`/News/${item.id}/${item.name}`}
          >
            {item.name}
          </NavLink>
        </li>
      );
    });
  }, [list]);
  return (
    <div>
      <ul>
        动态路由传参:
        {listView}
      </ul>
    </div>
  );
}

<!-- News.jsx -->
export default function News(props) {
  console.log(props, "News文件");
  // 动态路由在match属性里面取
  const { id, name } = props.match.params;

  return (
    <div>
      新闻
      <div>id:{id}</div>
      <div>name:{name}</div>
    </div>
  );
}

<!-- Home.jsx -->
import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import list1 from "./Home/list1";
import NotFounted from "./NotFounted";

export default function Home() {
  return (
    <div>
      <Switch>
        <Route path="/Home/list1" component={list1}></Route>

        {/* 如果从匹配到从/Home页面过来,就重定向到list1组件 */}
        <Redirect from="/Home" to="/Home/list1" exact></Redirect>

        {/* 如果没有匹配的路由 显示404组件 */}
        <Route component={NotFounted}></Route>
      </Switch>
    </div>
  );
}

<!-- IndexRouter.jsx -->
import React from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import Home from "./tabber/Home";
import News from "./tabber/news";
import NotFounted from "./tabber/NotFounted";
export default function IndexRouter(props) {
  return (
    <div>
      <HashRouter>
        <Switch>
          <Route path="/Home" component={Home}></Route>

          {/* 动态路由传参需要来path上以/:key名的形式来定义占位数据 */}
          <Route path="/News/:id/:name" component={News}></Route>

          <Redirect from="/" to="/Home" exact></Redirect>
          <Route path="" component={NotFounted}></Route>
        </Switch>
      </HashRouter>
    </div>
  );
}

<!-- App.jsx 根组件 -->
import React from "react";
improt ReactDom from 'react-dom';
import IndexRouter from "./view/一级路由与多级路由/IndexRouter";
export default function App() {
  return (
    <div>
      <IndexRouter>
      </IndexRouter>
    </div>
  );
}

ReactDom.render(<App/>,document.getElementById('root'))

路由传参 query | state

<!-- list1.jsx -->
import React, { useMemo, useState } from "react";
import { NavLink ,useHistory} from "react-router-dom";
export default function List(props) {
  console.log(props);
  const [list, setlist] = useState([
    { name: "前端猛男", id: 1 },
    { name: "前端猛男2", id: 2 },
    { name: "前端猛男3", id: 3 },
  ]);

  // 路由传参 query | state
  const Hisotry = useHistory();
  const listView2 = useMemo(() => {
    return list.map((item) => {
      return (
        <li key={item.id} onClick={() => RouterPush(item)}>
          {item.name}
        </li>
      );
    });
  }, [list]);
  const RouterPush = (item) => {
    // 1. query传参
    props.history.push({
       pathname: "/News",
       query: { id: item.id, name: item.name },
    });

    // 2. state传参
    Hisotry.push({
      pathname: "/News",
      state: { id: item.id, name: item.name },
    });
  };

  return (
    <div>
      <ul>
        路由传参( query | state):
        {listView2}
      </ul>
    </div>
  );
}

<!-- News.jsx -->
export default function News(props) {
  console.log(props, "News文件");

  // query 在location.query里面取
  const { id, name } = props.location.query;

  // state 在location.state里面取
  const { id, name } = props.location.state;

  return (
    <div>
      新闻
      <div>id:{id}</div>
      <div>name:{name}</div>
    </div>
  );
}

<!-- Home.jsx -->
import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import list1 from "./Home/list1";
import NotFounted from "./NotFounted";
export default function Home() {
  return (
    <div>
      <Switch>
        <Route path="/Home/list1" component={list1}></Route>

        {/* 如果从匹配到从/Home页面过来,就重定向到list1组件 */}
        <Redirect from="/Home" to="/Home/list1" exact></Redirect>

        {/* 如果没有匹配的路由 显示404组件 */}
        <Route component={NotFounted}></Route>
      </Switch>
    </div>
  );
}

<!-- IndexRouter.jsx -->
import React from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import Home from "./tabber/Home";
import News from "./tabber/news";
import NotFounted from "./tabber/NotFounted";
export default function IndexRouter(props) {
  return (
    <div>
      <HashRouter>
        <Switch>
          <Route path="/Home" component={Home}></Route>
          <Route path="/News" component={News}></Route>

          <Redirect from="/" to="/Home" exact></Redirect>
          <Route path="" component={NotFounted}></Route>
        </Switch>
      </HashRouter>
    </div>
  );
}

<!-- App.jsx 根组件 -->
import React from "react";
improt ReactDom from 'react-dom';
import IndexRouter from "./view/一级路由与多级路由/IndexRouter";
export default function App() {
  return (
    <div>
      <IndexRouter>
      </IndexRouter>
    </div>
  );
}

ReactDom.render(<App/>,document.getElementById('root'))

好好加油吧,少年!