Top React Interview Question & Answer | React Routing

react interview question and answer, top react interview question, interview question react, interview question react js, react routing interview questions, react js routing interview questions, react-router interview questions, react routing, react routing questions
This Article contains Question of React Router V5 and V6
React Router v6
https://reactrouter.com/docs/en/v6/getting-started/overview
π‘ What are route-matching components?
Switch and Route
are the two route-matching components. When a <Switch> is rendered, it searches through its children <Route> elements to find one whose path matches the current URL. When it finds one, it renders that <Route> and ignores all others. If no <Route> matches, the <Switch> renders nothing (null).
π‘ Is it ok to put <Route path=”/”> at first & last index in Switch?
<Route path>
matches the beginning of the URL, not the whole thing.
So a <Route path="/">
will always match the URL. Because of this, we typically put <Route> last in <Switch>
.
If want to put it anywhere then a possible solution is to use <Route exact path="/">
which does match the entire URL.
π‘ What is Link & NavLink in React Router?
React Router provides a <Link>
component to create links in your application. Wherever you render a <Link>, an anchor will be rendered in your HTML document.
The <NavLink>
is a special type of <Link> that can style itself as βactiveβ when its to
prop matches the current location.
<Link to="/">Dashboard</Link> // <a href="/">Dashboard</a> <NavLink to="/home" activeClassName="hurray"> Home </NavLink>
react interview question and answer | react routing | react routing questions
π‘ How can we render components with React Route?
There is a total of three ways provided by React Router to render components.
- React Component props
- React render function
- React children props.
Note: The recommended method of rendering something with a is to use children
elements.
π‘ What is the difference between react Router component way and the render function way?
When you use component
, the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component for every render. Instead of just upgrading the old component, the existing component is unmounted and the newly created component is mounted.
Instead of having a new React element created for you using the component prop, you can pass in a function to be called when the location matches. The render
prop function has access to all the same route props (match, location, and history) as the component renders prop.
<Router> <Route path="/user/:username" component={User} /> </Router>, <Router> <Route path="/home" render={() => <div>Home</div>} /> </Router>,
π‘ Can we use the component and render both Route methods at once?
<Route component>
takes precedence over <Route render>
, so donβt use both in the same <Route>.
π‘ Explain all attributes of BrowserRouter?
A <Router> that uses the HTML5 history API (pushState, replaceState, and the popstate event) to keep your UI in sync with the URL.
<BrowserRouter basename={optionalString} forceRefresh={optionalBool} getUserConfirmation={optionalFunc} keyLength={optionalNumber} > <App /> </BrowserRouter>
basename – The base URL for all locations.
getUserConfirmation – A function to use to confirm navigation.
forceRefresh – If true the router will use full-page refreshes on every page navigation.
keyLength = The length of location.key. Defaults to 6.
<BrowserRouter basename="/calendar" forceRefresh={true} keyLength={12} getUserConfirmation={(message, callback) => { // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} > <Link to="/today" /> // renders <a href="/calendar/today"> <Link to="/tomorrow" /> // renders <a href="/calendar/tomorrow"> </BrowserRouter>
π‘ What are HashRouter and MemoryRouter?
A <Router>
that uses the hash portion of the URL (i.e. window.location.hash
) to keep your UI in sync with the URL.
<HashRouter basename={optionalString} getUserConfirmation={optionalFunc} hashType={optionalString} > <App /> </HashRouter>
Read here: https://v5.reactrouter.com/web/api/HashRouter
A <Router>
that keeps the history of your βURLβ in memory (does not read or write to the address bar). Useful in tests and non-browser environments like React Native.
<MemoryRouter initialEntries={["/one", "/two", { pathname: "/three" }]} initialIndex={1} keyLength={12} getUserConfirmation={optionalFunc} > <App /> </MemoryRouter>
Read here: https://v5.reactrouter.com/web/api/MemoryRouter
π‘ What is the purpose of “exact”?
When true, will only match if the path matches the location.pathname exactly.
<Route exact path="/one"> <About /> </Route>
path location.pathname exact matches?
/one /one/two true no
/one /one/two false yes
π‘ What is the strict property in Route?
When true, a path that has a trailing slash will only match a location.pathname with a trailing slash.
<Route strict path="/one/"> <About /> </Route>
path location.pathname matches?
/one/ /one no
/one/ /one/ yes
/one/ /one/two yes
π‘ What will happen with the below code?
<Route exact strict path="/one"> <About /> </Route>
strict can be used to enforce that a location.pathname has no trailing slash, but in order to do this both strict and exact must be true.
path location.pathname matches?
/one /one yes
/one /one/ no
/one /one/two no
π‘ What is Redirect?
Any time that you want to force navigation, you can render a <Redirect>
. When it renders, it will navigate using its to prop.
Rendering a <Redirect> will navigate to a new location. The new location will override the current location in the history stack like server-side redirects (HTTP 3xx) do.
<Route exact path="/"> {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />} </Route>
π‘ What are Route props?
All three render methods will be passed the same three route props
π‘ What all properties, the match object contains?
A match
object contains information about how a matched the URL. match objects contain the following properties:
params – Key/value pairs parsed from the URL.
isExact – true if the entire URL was matched (no trailing characters)
path – The path pattern used to match. Useful for building nested <Route> s
url – The matched portion of the URL. Useful for building nested <Link> s
π‘ How to get params in react?
useParams hook
returns an object of key/value pairs of URL parameters. Use it to access match.params
of the current <Route>.
<Route path="/users/:userId"> <BlogPost /> </Route> let { userId } = useParams();
π‘ How to upgrade from Router V5 to V6?
https://reactrouter.com/docs/en/v6/upgrading/v5
π‘ What are the features of React Router V6?
- Switch Replaced with Routes.
- Defining Component with element prop.
- The exact Prop is not Needed Anymore
- No Need to Install react-router-config Separately
- useHistory is now useNavigate
- activeStyle and activeClassName Props Removed From <NavLink>
- Replace Redirect with Navigate
Read here full story –
https://dev.to/arunavamodak/react-router-v5-vs-v6-dp0
π» Routes Structure of V6
<BrowserRouter> <Routes> <Route path="/" element={<App />}> <Route index element={<Home />} /> <Route path="teams" element={<Teams />}> <Route path=":teamId" element={<Team />} /> <Route path="new" element={<NewTeamForm />} /> <Route index element={<LeagueStandings />} /> </Route> </Route> </Routes> </BrowserRouter>
π» NavLink code in V5 and V6
/V5 <NavLink to="/news" style={{ color: 'black' }} activeStyle={{ color: 'blue' }}> Exchanges </NavLink> //V6 <NavLink to="/news" style={({isActive}) => { color: isActive ? 'blue' : 'black' }}> Exchanges </NavLink>
π»
React Redirect Component in V6
// v5 <Route exact path="/latest-news"> <Redirect to="/news"> </Route> // v6 <Route path="/latest-news" element={<Navigate replace to="/news">} />
π‘ React Router Authentication implement and Protected Routes in React Router V6?
https://www.robinwieruch.de/react-router-authentication/
- React Redux Unit Testing of Actions, Reducers, Middleware & Store
- Micro frontends with Module Federation in React Application
- React Interview Question & Answers – Mastering React
- Top React Interview Question & Answer | React Routing
- React Interview Questions and Answers | React hooks
- Higher Order Component with Functional Component | React JS
- Top React Interview Questions and Answers | Must Know
- Interview Question React | Basics for Freshers and Seniors
- React JS Stripe Payment Gateway Integration with Node | Step by Step Guide
- Create Custom QR Code Component using QR Code Styling in React JS
- How to create a common Helper class or util file in React JS
- React Build Routing with Fixed Header and Navigation | React Router Tutorial
- React Create Dashboard Layout with Side Menu, Header & Content Area
react interview question and answer, top react interview question, interview question react, interview question react js, react routing interview questions, react js routing interview questions, react-router interview questions, react routing, react routing questions