我是 React 新手,我正在尝试构建一个看板。我有一个 Board 组件 att 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;
我已经尝试了所有我能想到的,但如果有人有任何想法请帮忙。
<Route
path={`${columns.id}`}
element={<Columns columnId={columns.id} title={columns.title} />}
/>
由于columns是一个数组,columns.id是未定义的。因此,这只会显示 url 是否为“localhost/undefined”,即使如此,它也会传递未定义的 it 和标题。
我认为你想要做的是有一个路由参数,你可以使用
:
后跟你想要命名参数的任何内容来实现:
<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 />}
/>