You missed the return statement;
You should return it,so,react can render the page.
const lessonTableRowLink = (LessonId:number|undefined) => {
let link = '/edit/Lesson/'+LessonId;
return <Redirect to= {link} /> // add return
}
You should also check for NavLink
or history#push
I’d recommend using react-router-dom
‘s useHistory
hook for this.
You’re code could look something like this:
import React, { FC } from 'react';
import { useHistory } from 'react-router-dom';
const MyComponent: FC = () => {
const history = useHistory();
const lessonTableRowLink = (LessonId:number|undefined) => {
let link = '/edit/Lesson/'+LessonId;
history.push(link);
}
return (
...
<tr className="lessonTableRow" key={lesson.lessonId} onDoubleClick={() =>{ lessonTableRowLink(lesson.lessonId)}}>
...
);
};
JSX doesn’t do anything on its own, and ESLint is warning you about this. Instead, you have to use React Router’s history
API
history.replace(link)
I am trying to understand why this is returning an error Expected an assignment or function call and instead saw an expression @typescript-eslint/no-unused-expressions
as far as Im aware the value being passed into LessonId is correct.
Further upstream I am able to just <Redirect to="/edit/Lesson/"+LessonId; />
but im currently trying to redirect on doubleclick hence the function.
<tr className="lessonTableRow" key={lesson.lessonId} onDoubleClick={() =>{ lessonTableRowLink(lesson.lessonId)}}>
const lessonTableRowLink = (LessonId:number|undefined) => {
let link = '/edit/Lesson/'+LessonId;
<Redirect to= {link} />
}
Thanks for showing the reason why the code above was not working, I would say that this is closest to my original code and gets the intended task done.
This is the closest to the solution that I ended up using but want to give a thanks to all for putting in their two cents.
Could you possibly elaborate on this a bit more? I did a bit of google searching and from what i understand