SolidJS Router 不渲染页面 - 导航不起作用

Question

在导航时，即使将路线的路径添加到搜索栏中的 url，路线的组件也未呈现。它仅在刷新页面时呈现。

我的标题有用于导航到不同 URL 的按钮（使用 useNavigate 挂钩）。当我单击每个按钮时，路径会添加到搜索栏中的 URL，但之前的组件仍然保留在页面上，而新组件未显示。

例如，当我在“/”上时，会显示“Hi”，但当我导航到“/mybooks”时，Books 不会显示，并且“Hi”仍显示在屏幕上。我必须重新加载页面才能显示 Books。

App.jsx：

function App() {
  return (
    <div class={styles.App}>
      <Header styles={styles} />
      <main>
        <Router>
          <Route path="/" component={() => <p>Hi!</p>} />
          <Route path="/mybooks" component={Books} />
          <Route path="/add" component={Add} />
        </Router>
      </main>
    </div>
  );
}

我还在index.jsx中用Router包装了App：

render(() => (
  <Router root={App} />
), root);

我尝试删除内部 Router ，认为这是导致问题的原因，但是当我这样做时，没有渲染任何内容（应该渲染的三个组件都没有显示），并且我还收到警告（无法识别的值。已跳过）插入。）

我想知道为什么在不刷新页面的情况下无法渲染组件。如何解决这个问题，并在我导航到每个组件的 Route 标记中定义的路径时立即渲染每个页面？

Answer 1

您没有按预期使用 Router API。

root

用于提供布局，而不是用于应用程序根。

App

组件应返回

Router

:

function App() {
  return (
    <Router root={Layout}>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

这是一个工作演示：

import { Route, RouteSectionProps, Router } from "@solidjs/router";
import { Component } from "solid-js";
import { render } from "solid-js/web";

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  )
};
const About = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  )
};

const Layout: Component<RouteSectionProps> = (props) => {
  return (
    <main>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
      {props.children}
    </main>
  );
}

function App() {
  return (
    <Router root={Layout}>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

render(() => <App />, document.body);

在布局组件中，您可以使用

<a>

元素或

<A>

组件。后者允许使用其父级的相对路径。