React Router 导航

Question

Link 和 NavLink 声明式导航

import { Link } from "react-router-dom";

export default function Root() {
  return (
    <>
      <div id="sidebar">
        <nav>
          <ul>
            <li>
              {/* 声明式导航 */}
              <Link to={`contacts/1`}>Your Name</Link>
            </li>
            <li>
              <Link to={`contacts/2`}>Your Friend</Link>
            </li>
          </ul>
        </nav>
      </div>
    </>
  );
}

<div>
    <NavLink 
    exact
    to="/"
    activeClassName={classes.active}
    activeStyle={{color: 'red'}}
   >主页</NavLink>
  <NavLink to="/about">关于</NavLink>
</div>

activeClassName 和 activeStyle 的作用相同，指定链接激活后的样式

useNavigate 编程式导航

import { useNavigate } from "react-router-dom";

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/session-timed-out");
    }
  }, [userIsInactive]);
}

useParams 和 useSearchParams 获取路由参数

navigate("/user/123?name=jack");

const [searchParams, setSearchParams] = useSearchParams();
const name = searchParams.get("name");

const params = useParams();
const id = params.id;