CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-routerreact-table
Paganini
Paganini

Reputation: 27

Redirect after click on button and render a tab on a different route

I'd like to render a Tabel component in "/game" route after clicking on a group of difficulty buttons. So the application must pass from route "/" to "/game" rendering a proper tabel depending on a difficulty state set in DifficultyButtons.js. I manage Route components in App.js like this: ` 

      <Route path='/' render={() => <DifficultyButtons/>} />
      <Route path='/game' render={() => <Table/>} />

`

In file DifficultyButtons.js redirection starts from clicking on a button that set a state "difficulty" that is going to be used in file Table.js where my purpose is to render a Table proportionally to the difficulty level set. Here's Table.js:

`

const location = useLocation();
const rows = N*location.state;
const columns = M*location.state;


return (

    <Table responsive>
        <tbody>
        {Array.from({length: rows}).map((_, row_index) => (
            <tr key={row_index}>
                {Array.from({length: columns}).map((_, column_index) => (
                    <td key={column_index}>
                        try
                    </td>
                ))}
            </tr>
        ))}
        </tbody>
    </Table>
    </div>
)

` Is this the proper way to render the proportional table? I'd like to understand why redirecting to "/game" is not working. Code for redirection in DifficultButtons.js:

{selected ? (
        <Redirect to={{
            pathname: '/game',
            state: {level:difficulty}
        }}

Upvotes: 1

Views: 823

Answers (2)

Aneeq Ur Rehman Shafique
Aneeq Ur Rehman Shafique

Reputation: 46

Instead of 'Redirect', you can use 'Link' from 'react-router-dom'.

<Link to="/game?level=difficulty" />

You can visit official documentation for v5 at https://v5.reactrouter.com/web/api/Link

Upvotes: 1

Drew Reese
Drew Reese

Reputation: 202864

Is this the proper way to render the proportional table?

This is a rather subjective question, but I don't see any overt issue with the way you're mapping the "2d array".

I'd like to understand why redirecting to "/game" is not working.

When redirecting and passing state you are passing the difficulty level on state.level

<Redirect
  to={{
    pathname: '/game',
    state: { level: difficulty }
  }}
/>

but only reference location.state in the target route's component

const location = useLocation();
const rows = N * location.state;
const columns = M * location.state;

Since location.state is an object the result of the computations is likely that rows and columns are both NaNs.

Dereference the passed level value from the route state, provide safe default value for level if it's not passed in route state, and also a default value for state if a user somehow navigates directly to "/game" where the route state will be simply undefined.

const location = useLocation();
const { state: { level = 0 } = {} } = location;

const rows = N * level;
const columns = M * level;

You ask about redirecting in response to a button click, and in this case you can't just call/return a Redirect component from a callback and expect it to effect anything being rendered. For this you'll need to issue an imperative redirect. Use the history object to redirect with the appropriate state.

const history = useHistory();

...

// in some button's onClick handler
history.replace({
  pathname: '/game',
  state: { level: difficulty }
});

Upvotes: 1

Related Questions