How do you define a route parameter in ASP.NET Core?

You define route parameters in the route template using curly braces, for example '{id}' in the pattern.

Can route parameters be optional?

Yes, by appending a question mark like '{id?}' you make the route parameter optional.

How Do You Pass Parameters with React Router? | FullStackPrep.Dev

💡 Concept Name

React Router Parameters – A method for passing values through the URL using dynamic segments in the route path.

📘 Quick Intro

React Router allows you to pass parameters through the URL using a colon syntax in the route definition. These parameters can be accessed in the component using the useParams hook.

🧠 Analogy / Short Story

Think of a hotel booking system. You visit a specific URL like /booking/123 to view booking #123. That number is passed in the URL as a parameter. React Router reads that value to show the correct reservation details.

Just like hotel staff know what room to prepare by the room number in your booking, React knows what data to load using the parameter in the URL.

🔧 Technical Explanation

🛣️ Define a route with dynamic segments using colon notation (e.g. path="/user/:id").
🔍 Inside the component, call useParams() from react-router-dom to access the parameter.
🧭 Parameters are matched by their placeholder name (like id in :id).
🔁 Useful for dynamic pages such as profiles, products, or blog posts based on URL.
🗂️ You can use multiple parameters (e.g. /category/:type/product/:id).

💻 Real Code Example


// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import UserProfile from './UserProfile';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </Router>
  );
}

// UserProfile.js
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams();
  return <h2>Viewing profile for user ID: {id}</h2>;
}

❓ Interview Q&A

Q1: How do you pass a parameter with React Router?
A: By defining a dynamic segment in the route path like :id and accessing it with useParams().

Q2: What hook is used to access route parameters?
A: useParams() from react-router-dom.

Q3: Can you have multiple parameters in a route?
A: Yes, like /product/:category/:id, which can be accessed as params.category and params.id.

Q4: What version of React Router supports this?

A: Dynamic route parameters have been supported since v5, with improved handling in v6+.

Q5: Are parameters always strings?
A: Yes, they are extracted from the URL and parsed as strings.

Q6: Can parameters be optional?
A: Yes, with custom route logic or pattern matching, but React Router v6 does not support optional params directly.

Q7: Is query string handling the same as params?
A: No, query strings like ?sort=asc require useLocation or URLSearchParams to read.

Q8: Can params be passed through Link component?
A: Yes, using a to prop like to={`/user/${id}`}.

Q9: What if a param is missing?
A: The component will still render but param will be undefined.

Q10: What is a route match?
A: A match means the path in the URL matches a route pattern and any params are extracted accordingly.

📝 MCQs

Q1. What does the colon (:) indicate in a React Router path?

Optional segment
Exact match
A dynamic route parameter
Wildcard

Q2. Which hook is used to access URL parameters?

useLocation()
useParams()
useNavigate()
useRouteMatch()

Q3. What value does useParams() return?

String
Boolean
An object of key-value pairs
Array of params

Q4. What must the route path include to enable parameters?

A question mark
A colon before the param name
Quotes
Nothing special

Q5. Can you use multiple parameters in a path?

No
Only one
Yes
Only if optional

Q6. Which version of React Router is most commonly used with hooks like useParams?

v3
v4
v5
v6

Q7. Are URL params case-sensitive?

No
Yes
Sometimes
Only on Windows

Q8. How are parameters passed using the Link component?

With context
Via query params
Via template literals in the 'to' prop
Not possible

Q9. What hook should be used for query parameters instead?

useHistory()
useNavigate()
useParams()
useLocation()

Q10. What happens if a dynamic parameter is missing?

Page crashes
Shows error
It is undefined
Throws warning

💡 Bonus Insight

Besides URL params, React Router also supports state-based navigation where you can pass complex objects without exposing them in the URL. However, these values won't persist on refresh and are best used for transient UI data.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon

How Do You Pass Parameters with React Router?