如何在子 const 而不是父组件中导航("*")？

Question

我的app.js路由器中有这个位置：

<Router>
<Routes>
<Route path="/" element={[<Navigation key={0}/>, <Home key={1}/>]} />
<Route path="*" element={[<NotFound/>]} /> 
</Routes>
</Router>

因此，任何未识别的请求都会转到我的404(NotFound(

现在，我想将请求挂接到这一点，这样，如果一个元素需要有数据，并且请求返回404，那么它应该重定向到404。

这是我的父组件：

useEffect(() => {
fetchData()
}, [])
async function fetchData() {
var data = (await redirectGetRequest(`Quizzes/${quizId}`))
setQuiz(data)
}

这是我的请求组件：

export const redirectGetRequest = async (endpoint) => {
const navigate = useNavigate();
var result = ""
var errorMsg = {};
try {
const get_response = await Axios.get(`${window.ipAddress.ip}/${endpoint}`);
if (get_response.data !== null && get_response.status === 200) {
result = get_response.data;
}
else {
// handle error here
}
}
catch (err) {
if (err.response?.status === 404) { navigate('*') } // doesnt like this
else { errorMsg = 'alternative error' }
console.log("error",err)
}
return (result);
}

这就是问题所在，它不喜欢这个元素中的navigate或useNavigate。

我不想在父组件中重定向，因为这会破坏在单个位置处理所有请求错误和重定向的目的。

我得到的错误是：

Line 28:22:  React Hook "useNavigate" is called in function "redirectGetRequest" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" 

与CCD_ 5类似地更改父请求和子请求中的CCD_。

Answer 1

您的函数redirectGetRequest打破了挂钩规则。钩子必须从React Function组件调用。相反，您正在从函数中调用钩子。

解决方案是更新redirectGetRequest，将navigation作为参数。

export const redirectGetRequest = async (navigate, endpoint) => {
var result = ""
var errorMsg = {};
try {
const get_response = await Axios.get(`${window.ipAddress.ip}/${endpoint}`);
if (get_response.data !== null && get_response.status === 200) {
result = get_response.data;
}
else {
// handle error here
}
}
catch (err) {
if (err.response?.status === 404) { navigate('*') } // doesnt like this
else { errorMsg = 'alternative error' }
console.log("error",err)
}
return (result);
}

然后在组件内部调用useNavigate钩子，并作为参数传递。

const navigate = useNavigate();
useEffect(() => {
fetchData()
}, [])
async function fetchData() {
var data = (await redirectGetRequest(navigate, `Quizzes/${quizId}`))
setQuiz(data)
}