如何使用SolidJS Router传递Props？代码实现无效果求解答

在Solid Router中，<Route>组件的component属性并不支持通过props属性传递自定义参数，这是你当前代码无法正常传递props的核心原因。以下是两种可行的解决方法：

方法一：使用element属性直接渲染组件并传参 #

这是最直接的方式，通过element属性直接渲染目标组件并手动传递props：

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";
import "./app.css";

function Header(props) {
  return (
    <>
      <div>{props.name}</div>
      <div>Test</div>
    </>
  );
}

function App() {
  let name = "Test Val";

  return (
    <>
      {/* 使用element属性直接渲染Header并传递name */}
      <Route path="/test" element={<Header name={name} />}></Route>
    </>
  );
}

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById("app")
);

方法二：结合data属性与createRouteData（适用于动态场景） #

如果你的props需要结合路由参数或异步数据，可以通过data属性传递，再用createRouteData获取：

import { render } from "solid-js/web";
import { Router, Route, createRouteData } from "@solidjs/router";
import "./app.css";

function Header(props) {
  // 通过createRouteData获取路由传递的数据
  const routeData = createRouteData(() => props.data);
  return (
    <>
      <div>{routeData()}</div>
      <div>Test</div>
    </>
  );
}

function App() {
  let name = "Test Val";

  return (
    <>
      <Route 
        path="/test" 
        component={Header} 
        data={() => name} // 通过data传递自定义数据
      ></Route>
    </>
  );
}

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById("app")
);

关键说明 #

• <Route>的component属性只会注入路由内置props（如params、location等），自定义props需要通过element手动传递，或通过data属性结合createRouteData获取。
• 使用element的方式更符合SolidJS组件渲染逻辑，直观且适配大多数自定义props传递场景。

内容的提问来源于stack exchange，提问作者kjh