react-router相关

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

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

Outlet

index route

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

useLocation 获取路由

1
let location = useLocation();

路由权限(新版)

1
2
3
4
5
6
7
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 />
)
)}/>