I have been searching and trying for hours and can't find an actual solution to this problem. I have react-router-dom v6.2.1 and react v17.0.2. I have been to the react-router-dom page and seen the useNagivate import. I have tried that and every single time I get
Uncaught Error: Invalid hook call. Hooks can only be called inside the body of a function component
I can't get it to work. I get the above as soon as I render the page when I make it a property of my class, I get it when I click the link when I remove it as a property and try to access it inside my function call. The react-router-dom page shows using it in a basic function, but not in a class and I just can't get it to work. I will show you the relevant parts of my class with the second approach in mind. Please remember if I add it as a property of the class I immediately get the error as soon as the page renders...
import React, {Component} from 'react';
import {useNavigate} from 'react-router-dom';
//...all my other imports
class Users extends Component {
constructor(props) {
super(props);
//...state and such
}
render() {
const {users, filterType} = this.state;
return (
<Card className="container">
<CardContent>
<Container component="div" className="list">
<List className="users-list">
{
users.map((user, index) => {
return (
<ListItem
key={index}
data-index={user.id}
onClick={this.startChat}
>
//...rest of display stuff for user
)
});
}
</List>
</Container>
</CardContent>
</Card>
)
}
startChat = (e) => {
let navigate = useNavigate();
let el = getParentLi(e.target);
let userID = el.dataset.index;
let otherUser = this.getOtherUser(userID);
ApiService.startChat(user.id, user.name, userID, otherUser.name, user.key)
.then(data => {
if(data.success) {
storage.set('chatID', data.message);
navigate('/')
}
})
.catch(err => {
console.log("Error starting new chat")
console.log(err);
});
}
}
I have also tried just straight using useNavigate('/'); in the .then for the ApiService call. That doesn't work either. I have tried making it a prop in the class...
class Users extends Component {
navigate = useNagivate();
...
}
That causes the error as soon as the app renders. I could really use a hand in figuring out how to actually cause navigation to happen using react-router-dom v6.
If you need to see the actual routing part I'll show it now, if not please ignore the next part...
class App extends Component {
//...constructor, state, and componentDidMount excluded for size.
render() {
return (
//...lots of stuff here
<BrowserRouter>
<nav className="menu">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/users">Users</Link></li>
//..rest of my links
</ul>
</nav>
<Routes>
<Route path="/" element={<HomeCard />} />
<Route path="/users" element={<Users />} />
//...Rest of my route paths
</Routes>
</BrowserRouter>
//..close everything out
);
}
}
Those are the routes and everything. I apologize for the extremely long post. I am hoping the more information I give, the easier it will be for someone to see exactly what is wrong with my code.
Side note... Is it possible for me to literally just override this whole system and do something like window.location = "/"? I realize that's probably a terrible thing to do, but I can't get programmatic routing to happen. Thank you for sticking with me through this long post. Hopefully someone can help. Thank you.
