使用 Rails 7 做出反应：无法解决"../components/EditTopic"

Question

我非常习惯Rails，但我第一次添加React作为前端，我希望这是非常明显的初学者问题。我遵循这个教程(大致…使用我自己的模型结构)，但它实际上并没有讨论添加编辑路由。(出于某种原因，它比CRUD更CRD…)

我在javascript/routes/index.jsx中设置了以下路由:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import MainNavbar from "../components/MainNavbar";
import Home from "../components/Home";
import Topics from "../components/Topics";
import Topic from "../components/Topic";
import NewTopic from "../components/NewTopic";

export default (
<Router>
<MainNavbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/topics" element={<Topics />} />
<Route path="/topic/:id" element={<Topic />} />
<Route path="/topic" element={<NewTopic />} />
</Routes>
</Router>
);

使用这个结构，它工作得非常好。然而，当我为EditTopic添加路由时，它从页面中消失，并弹出服务器错误:

19:50:16 js。1 | [watch] build started(更改)app/javascript/routes/index.js ") 19:50:16 js。请问[错误]可以/components/EditTopic"19:50:16 js。[19:50:16][和合| app/javascript/线路/索引。Jsx:8:22; 19:50:161 | 8│import EditTopic from "./components/EditTopic"

我添加的路线非常简单。我使用:

import EditTopic from "../components/EditTopic";

对于实际路线，我都试过了:

<Route path="/topics/:id" element={<EditTopic />} />

:

<Route path="/topics/:id" element={<EditTopic />} />

都产生相同的错误。有人能告诉我我哪里出错了吗?

编辑

我已经根据实际工作的NewTopic.jsx设置了一个初始的EditTopic.jsx。我知道它可能充满了错误，但我打算使用这个作为模板来学习/调试:

import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
const EditTopic = () => {
const navigate = useNavigate();
const [name, setName] = useState("");
const [definitions, setDefinitions] = useState("");
const [state_v_trait, setStateVTrait] = useState("");
const [measurement, setMeasurement] = useState("");
const [notes, setNotes] = useState("");
const stripHtmlEntities = (str) => {
return String(str)
.replace(/n/g, "<br> <br>")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
};
const onChange = (event, setFunction) => {
setFunction(event.target.value);
};
const onSubmit = (event) => {
event.preventDefault();
const url = "/api/v1/topics/${this.state.id}";
if (name.length == 0 )
return;
const body = {
name: stripHtmlEntities(name),
definitions: stripHtmlEntities(definitions),
state_v_trait: stripHtmlEntities(state_v_trait),
measurement: stripHtmlEntities(measurement),
notes: stripHtmlEntities(notes)
};
const token = document.querySelector('meta[name="csrf-token"]').content;
fetch(url, {
method: "PUT",
headers: {
"X-CSRF-Token": token,
"Content-Type": "application/json",
},
body: JSON.stringify(body),
})
.then((response) => {
if (response.ok) {
return response.json();
}
throw new Error("Network response was not ok.");
})
.then((response) => navigate(`/topic/${response.id}`))
.catch((error) => console.log(error.message));
};

// CUE HTML
return (
<div className="container mt-5">
<div className="row">
<div className="col-sm-12 col-lg-6 offset-lg-3">
<h1 className="font-weight-normal mb-5">
Edit {name}.
</h1>
<form onSubmit={onSubmit}>
<div className="form-group">
<label htmlFor="topicName">Name</label>
<input
type="text"
name="name"
id="topicName"
className="form-control"
required
onChange={(event) => onChange(event, setName)}
/>
</div>
<div className="form-group">
<label htmlFor="topicDefinitions">Definitions</label>
<input
type="text"
name="definition"
id="topicDefinitions"
className="form-control"
onChange={(event) => onChange(event, setDefinitions)}
/>
</div>
<div className="form-group">
<label htmlFor="state_v_trait">State versus Trait</label>
<textarea
className="form-control"
id="state_v_trait"
name="state_v_trait"
rows="5"
onChange={(event) => onChange(event, setStateVTrait)}
/>
</div>
<div className="form-group">
<label htmlFor="measurement">How is this measured?</label>
<textarea
className="form-control"
id="measurement"
name="measurement"
rows="5"
onChange={(event) => onChange(event, setMeasurement)}
/>
</div>
<div className="form-group">
<label htmlFor="notes">Other Notes</label>
<textarea
className="form-control"
id="notes"
name="notes"
rows="5"
onChange={(event) => onChange(event, setNotes)}
/>
</div>
<button type="submit" className="btn custom-button mt-3">
Create Topic
</button>
<Link to="/topics" className="btn btn-link mt-3">
Back to topics
</Link>
</form>
</div>
</div>
</div>
);
// END HTML
};
export default NewTopic;

然而，我也尝试过这个非常精简的EditTopic.jsx版本，错误仍然存在:

import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
const EditTopic = () => {
};
export default NewTopic;

Answer 1

您的导出文件名错误。

export default NewTopic 

应该

export default EditTopic