React 路由，当点击链接时，会访问正确的 URL，但整个网站是白色的

Question

我正在尝试构建一个看板。我在 localhost/ 有一个板组件，在那里我可以看到所有三列。例如，在第一列的标题中，我有一个指向 localhost/todo 的链接。当我点击它时，整个网站都是白色的。即使我的列组件在

App.jsx

中与

Board.jsx

中完全相同。这是为什么？

function App() {
  
  return (
    <DataProvider>
      <DataContext.Consumer>
        {({ columns }) => (
          <Routes>
            <Route path="/" element={<Board />} />
            {console.log(columns)}
            <Route
              path={`${columns.id}`}
              element={<Columns columnId={columns.id} title={columns.title} />}
            />
          </Routes>
        )}
      </DataContext.Consumer>
    </DataProvider>
  );
}

export default App;

这是我的主板组件

const Board = () => {
  const { columns } = useContext(DataContext);

  console.log(columns);
  return (
    <main>
      {columns.map((column, index) => (
        <Columns key={index} id={column.id} title={column.title} />
      ))}
    </main>
  );
};

export default Board;

该列本身看起来像这样：

const Columns = ({ id, title }) => {
  const { tasks, selectedTask} = useContext(DataContext);

  // Filtrera tasks baserat på kolumnens ID
  const filteredTasks = tasks.filter((task) => task.column === id);

  return (
    <section id="column">
      <h2 className="headerColumn">
        <Link
          style={{ textDecoration: "none", color: "black" }}
          id="linkColumn"
          to={`/${id}`}
        >
          {title}
        </Link>
      </h2>
      {filteredTasks.map((task, index) => (
        <div key={index} >
          <Card task={task} />
        </div>
      ))}
      {selectedTask && <CardPopUp />}
      {id === "todo" && (
        <div className="inputHolder">
          <AddTask />
        </div>
      )}
    </section>
  );
};

export default Columns;

如果有人有任何想法请帮忙。

Answer 1

 <Route
  path={`${columns.id}`}
  element={<Columns columnId={columns.id} title={columns.title} />}
/>

由于columns是一个数组，columns.id是未定义的。因此，这只会显示 url 是否为“localhost/undefined”，即使如此，它也会传递未定义的

id

和

title

。

我认为你想要做的是有一个路由参数，你可以使用

:

后跟你想要命名参数的任何内容来实现：

<Routes>
  <Route path="/" element={<Board />} />
  <Route
    path="/:columnId"
    element={/* we'll get to this */}
  />
</Routes>

如果有斜杠后跟任何字符串，则将匹配。要找出 url 当前设置的字符串，您可以使用

useParams

钩子。如果您想保持 Columns 组件不变（通过 props 接收数据），那么您可以创建一个新组件。该组件调用适当的钩子，计算出列，然后将其传递给

<Columns>

组件：

const ColumnPage = () => {
  const { columnId } = useParams();
  const { columns } = useContext(DataContext);
  const column = columns.find(column => column.id === columnId);

  return <Columns id={column.id} title={column.title} />
}
// elsewhere:
<Route
  path="/:columnId"
  element={<ColumnPage />}
/>