refactor: preserve URL search params during navigation
Introduce `useNavigateWithParams` to ensure that existing URL search parameters are maintained when navigating between pages. This is applied to the Article component, FileTree, and journal links to prevent losing state (like session or player info) during client-side navigation. Also intercepts markdown anchor links in the Article component to use client-side navigation.
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { Component, createMemo, createSignal, Show } from "solid-js";
|
||||
import { type FileNode, type TocNode } from "../data-loader";
|
||||
import { useNavigate } from "@solidjs/router";
|
||||
import { useNavigateWithParams } from "./useNavigateWithParams";
|
||||
|
||||
/**
|
||||
* 检查当前文件路径是否在文件夹内
|
||||
@@ -22,7 +22,7 @@ export const FileTreeNode: Component<{
|
||||
onClose: () => void;
|
||||
isHidden?: (node: FileNode) => boolean;
|
||||
}> = (props) => {
|
||||
const navigate = useNavigate();
|
||||
const navigate = useNavigateWithParams();
|
||||
const isDir = !!props.node.children;
|
||||
const isActive = createMemo(() => props.currentPath === props.node.path);
|
||||
// 默认收起,除非当前文件在该文件夹内
|
||||
@@ -85,7 +85,7 @@ export const HeadingNode: Component<{
|
||||
depth: number;
|
||||
isHidden?: (node: TocNode) => boolean;
|
||||
}> = (props) => {
|
||||
const navigate = useNavigate();
|
||||
const navigate = useNavigateWithParams();
|
||||
const anchor = props.node.id || "";
|
||||
const href = `${props.basePath}#${anchor}`;
|
||||
const hasChildren = !!props.node.children;
|
||||
@@ -99,6 +99,7 @@ export const HeadingNode: Component<{
|
||||
}
|
||||
};
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
navigate(href);
|
||||
// 滚动到目标元素,考虑导航栏高度偏移
|
||||
requestAnimationFrame(() => {
|
||||
|
||||
Reference in New Issue
Block a user