using parameters in routes

Sandesh GC answered on October 10, 2021 Popularity 9/10 Helpfulness 3/10

answer using parameters in routes

related Passing parameters to routes

using parameters in routes

Comment

//taken from https://v5.reactrouter.com/web/example/url-params
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";

// Params are placeholders in the URL that begin
// with a colon, like the `:id` param defined in
// the route in this example. A similar convention
// is used for matching dynamic segments in other
// popular web frameworks like Rails and Express.

export default function ParamsExample() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

function Child() {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let { id } = useParams();

  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}

Popularity 9/10 Helpfulness 3/10 Language whatever

Source: Grepper

Tags: parameters routes using whatever

Link to this answer
Share Copy Link

Contributed on Nov 17 2022

Sandesh GC

0 Answers Avg Quality 2/10

Closely Related Answers

Passing parameters to routes

Comment

class HomeScreen extends React.Component {  render() {    return (      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>        <Text>Home Screen</Text>        <Button          title="Go to Details"          onPress={() => {            this.props.navigation.navigate('Details', {              itemId: 86,              otherParam: 'anything you want here',            });          }}        />      </View>    );  }}
class DetailsScreen extends React.Component {  render() {    const { navigation } = this.props;    return (      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>        <Text>Details Screen</Text>        <Text>          itemId: {JSON.stringify(navigation.getParam('itemId', 'NO-ID'))}        </Text>        <Text>          otherParam:          {JSON.stringify(navigation.getParam('otherParam', 'default value'))}        </Text>        <Button          title="Go to Details... again"          onPress={() =>            navigation.push('Details', {              itemId: Math.floor(Math.random() * 100),            })          }        />      </View>    );  }}

Popularity 9/10 Helpfulness 1/10 Language whatever

Source: reactnavigation.org

Tags: parameters p

Link to this answer
Share Copy Link

Contributed on Oct 10 2021

Light Leopard

0 Answers Avg Quality 2/10

using parameters in routes

Contents

More Related Answers

using parameters in routes

Closely Related Answers

Passing parameters to routes

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.