I have the file App.js
:
import './App.css';
import Login from './Login';
function App() {
return (
<div className="App">
<Login />
</div>
);
}
export default App;
And the Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./Login";
import Table from "./Table.tsx";
import HomePage from "./HomePage";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route index element={<App />} />
<Route path="login" element={<Login />} />
<Route path="homepage" element={<HomePage />} />
<Route path="table" element={<Table />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Now, I want to add an icon to go back to homepage from table page, but it gives me the following error:
ERROR: useNavigate() may be used only in the context of a
component.
To complete this is the Table.tsx
file:
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import './Table.css';
const Table = () => {
const navigate = useNavigate();
const handleGoHome = () => {
navigate("/homepage");
};
return (
<div className="home-button-container">
<Button variant="primary" onClick={handleGoHome}>Home</Button>
</div>
);
};
const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Failed to find the root element');
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<Table />
</React.StrictMode>
);
export default Table;