如何以编程方式导航react-router-dom v6

Question

几年后我又回到了react世界。当然，情况已经永远改变了。我的应用程序用的是MemoryRouter，我可以用Link导航。但是useNaviate钩子并没有像预期的那样工作。它在页面上什么也没做。你能帮我一下吗?下面是我的代码:

路由器:

<MemoryRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</MemoryRouter>

我是这样尝试导航的:

function Home() {
// demo purpose
const navigate = useNavigate()

navigate('/dashboard')
}

我不确定我是否正确地使用了它，或者我是否需要在这里做其他事情。

Answer 1

代码直接在函数组件体中调用navigate作为无意的副作用。

从组件生命周期或回调中调用navigate来发出命令式导航操作:

function Home() {
const navigate = useNavigate()
useEffect(() => {
if (/* some condition */) {
navigate('/dashboard');
}
}, [/* dependencies? /*]);

...
}

或者有条件地将Navigate组件呈现给声明性导航操作:

function Home() {
...
if (/* some condition */) {
return <Navigate to="/dashboard" />;
};

...
}

Answer 2

问题是我在组件渲染时直接调用navigate。它应该在事件中调用，或者应该在useEffect钩子中调用。

Answer 3

在function call或useEffect中设置导航:

function Home() {
// demo purpose
const navigate = useNavigate()
useEffect(() => {
navigate('/dashboard')
}, []);
}