react-router相关

发表于 更新于 阅读次数： 本文字数： 882 阅读时长 ≈ 1 分钟 
1
<Link to="/">Home</Link>

useHistory

1
2
3
4
5
let history = useHistory();
history.push(`/invoices/${newInvoice.id}`);
history.go(n) - (function) Moves the pointer in the history stack by n entries
history.goBack() - (function) Equivalent to go(-1)
history.goForward() - (function) Equivalent to go(1)

useParams跳转页面时筛选出id信息

1
2
let params = useParams();
return <h1>Invoice {params.invoiceId}</h1>;

Outlet

index route

1
<Route index element={<Activity />} />

useLocation 获取路由

1
2
3
4
5
6
7
8
9
10
let location = useLocation();
## 路由权限（新版）
```jsx
const ProtectedRoute = ({ user, children }) => {
  if (!user) {
    return <Navigate to="/landing" replace />;
  }

  return children;
};

路由权限

1
2
3
4
5
6
7
<Route exact path="/home" render={() => (
    isLoggedIn() ? (
    <Redirect to="/front"/>
    ) : (
    <Home />
    )
)}/>

当前地址：Location

跳转页面：useNavigate