Clicking on a row within a material-ui table and redirecting to another page

Question

I have a file named route-names.js with the entry below

    export const REVIEW_FORM_URL = '/custom-forms/:customFormId';

I have a material-ui table with few rows and when I click on one for the rows the id of the row can be seen as part of the url and it takes me to a blank screen.

     onClick(form) {
        this.props.history.push(REVIEW_FORM_URL.replace(':customFormId', form.customFormId));

      }

I need to build a new page that will use the value within that url.

where in the onClick code above can I place a redirection to the new page and how ?

The name of my new page is tester.js.

Answer 1

Since you're using this.props.history I'll assume you are using some version of React Router.

If you want to go to another route in your application, using history.push is one of the possibilities.

If you push something in your history, you should have an element like this:

<Route path="/theRouteIWantToGoTo/:customFormId" render={<ComponentTester />}

Somewhere in your code where <ComponentTester /> renders what you need thanks to your tester.js render method.

Can you share more of your code?