javascript useNavigate()只能在组件上下文中使用< Router>,我尝试过使用chatGPT，但没有任何进展[已关闭]

pftdvrlh 于 2023-02-07 发布在 Java

关注(0)|答案(1)|浏览(163)

- 已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。

这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic，但这个问题的解决方式不太可能帮助未来的读者。
13小时前关门了。
Improve this question
当user为false时，我想使用useNavigate将用户定向到/register页面，而不是转到主页，但它一直给我一个错误：（useNavigate（）只能在组件上下文中使用。）请记住，我不想使用redirect，因为我当前版本的react-router-dom不支持它。 component.) Keep in mind I do not want to use redirect because my current version of react-router-dom does not support it. here is my code:

const App = () => {
  const user = false;
  const navigate = useNavigate();
  return (
    <div className="bg-[#0b0b0b]">
      <Router>
        <Routes>
          {user ? (<Route path="/" element={<Home />} />) : (navigate("/register"))}
          <Route path="/movies" element={<Home type="movie" />} />
          <Route path="/series" element={<Home type="series" />} />
          <Route path="/watch" element={<Watch />} />
          <Route path="/register" element={<Register />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </Router>
    </div>
  )
}

export default App

JavaScript

来源：https://stackoverflow.com/questions/75355378/usenavigate-may-be-used-only-in-the-context-of-a-router-component-i-have-tr

1条答案

按热度按时间

pb3skfrl1#

useNavigate钩子不能在为其提供路由上下文的任何路由器外部使用。要解决此错误，您应该将提供路由上下文的Router组件在ReactTree中提升到高于App组件的位置，以便可以在那里使用它。
不过，您不需要在App组件中使用useNavigate钩子，只需在其位置呈现一个Navigate组件来发出声明性导航操作即可。

import {
  BrowserRouter as Router,
  Routes,
  Navigate
} from 'react-router-dom';

const App = () => {
  const user = false;
  return (
    <div className="bg-[#0b0b0b]">
      <Router>
        <Routes>
          {user
            ? <Route path="/" element={<Home />} />
            : <Navigate to="/register" replace />
          }
          <Route path="/movies" element={<Home type="movie" />} />
          <Route path="/series" element={<Home type="series" />} />
          <Route path="/watch" element={<Watch />} />
          <Route path="/register" element={<Register />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </Router>
    </div>
  );
};

看起来这段代码正朝着路由保护实现的方向发展，完整的例子请参见我的答案here。

赞(0）回复(0）举报 2023-02-07

我来回答

javascript useNavigate()只能在组件上下文中使用< Router>,我尝试过使用chatGPT，但没有任何进展[已关闭]

1条答案

相关问题

热门标签

最新问答