score:0
in my opinion it's not a problem to have your "enter verification code" page be accessible from the url. but if you want to do this then yes it can be done.
the render component for your verification page needs to check some condition. if that condition is met then it loads the page. if not, it renders a <redirect/>
to your form page.
i am using a property in location.state as that condition. when you navigate within the app then you will pass this property in you <link/>
component by using a to
object instead of just a path string.
<link to={{ pathname: "/verify", state: { fromapp: true } }}>verify</link>
the component for the verification page will use the uselocation
hook to access the current location and see if the location state
includes the fromapp
property which we set.
const location = uselocation();
if (!location.state?.fromapp) {
return <redirect to="/" />;
}
i created a very simple codesandbox demo.
you get redirected if you go to "/verify" directly. but you can access it just fine by clicking on the "verify" link from the home page.
complete code:
import {
browserrouter,
link,
redirect,
route,
switch,
uselocation
} from "react-router-dom";
const home = () => (
<div>
<h1>home</h1>
<link to={{ pathname: "/verify", state: { fromapp: true } }}>verify</link>
</div>
);
const verificationpage = () => {
const { state } = uselocation();
if (!state?.fromapp) {
return <redirect to="/" />;
}
return (
<div>
<h1>enter verification code</h1>
<input />
<button>submit</button>
</div>
);
};
export default function app() {
return (
<browserrouter>
<switch>
<route path="/verify" component={verificationpage} />
<route path="/" component={home} />
</switch>
</browserrouter>
);
}
Source: stackoverflow.com
Related Query
- React-router-dom access pages only from app not from url
- Nested routing is not working in React Router dom V4 from individual component and works only from App.js component
- React router 4 `Link` component only changing the url and not updating the route
- react router app hosted on firebase issues 404 error only when trying to access route via address bar
- Why does my React app append the external URL to http://localhost:/<port> and not to ONLY the URL itself?
- React router does not change view, but url is changed - App is load inside iframe
- Reactjs react router dom useParams not working with dynamic url
- React router dom passing data from parent component to child router component does not pass the props.match
- React Router is able to do the routing only if started from root url
- React router exact matching only updating URL without re-render of DOM
- Getting API URL from the External File which is not a part of the React app
- I deployed my react app on firebase and I can access only route "/" from outside
- react router dom is not updating class component when url change
- External link not working when using LINK from react router dom
- React Router Dom & Firebase Auth: history.push changes url but does not render new component when called after firebase auth create account
- React router Dom Link does not change URL
- React Router Navbar background change only works in pages folder, but not on App.js?
- React router 4 - Why is my component only rendered on manually setting the url but not on clicking a Link with same url?
- React Router URL not found if refresh page - Create React App
- React Router Dom - React Router changing url but not page
- Remove trailling slash from base url in react router dom
- Display URL params on page when using react `withRouter` from react router dom
- react router dom history.replace is not re-render component if same URL
- Not able to access detail information from Api using React Router not rendering on the page
- Why Link from React Router Dom does not refresh when go back?
- why react router url changes but component does not load in my nested router app
- React Router routes not working from URL
- React JS Switch Router with admin only pages not hitting my 404 page
- react router with url from server not matching root
- React Router dom is not working when I hosted my React App with github pages?
More Query from same tag
- How can I show(read only) xslx, pdf files in react/javascript using (.xslx or .pdf) urls?
- Problem in putting a download button to download a pdf file in a React Website
- React conditional rendering - Why doesn't this code render anything?
- Redirecting from server side in NextJS
- Group Json data based on a field after converting it from csv to json in react
- How to update multiple elements conditionally at once
- Jest snapshot test adds a "_class" word into React HOC in snapshot on CI but not on my machine
- React error is not displayed on browser, only getting an empty screen
- Trying to figure out how to interface with the PayGate API
- CoreUI Icon doesn't appear in my react js app
- How to reset items in select from dropwdown itself
- Updating props in Higher Order Components
- Evaulating if-statements in React using State
- How do I map a resolved promise object in string form onto a button, for example
- Add opacity to last visible element in html list
- How to convert this into styled-components and how to nest classes
- Array inside an Object with Dynamic Key in Redux
- Can't import typescript react-modal
- React get returned value from function with fetch
- Changing components in a view in react
- TS error: Cannot invoke an expression whose type lacks a call signature
- How to wait for setState in componentDidMount to resolve when testing with enzyme?
- Update a selected property from react state of objects with arrays
- Getting a cannot read property map of undefined, although the items state is set with data
- ReactJS - Can't get function to load values from separate file after refactoring
- How to fix the "Warning: useLayoutEffect does nothing on the server"?
- React Hook useMemo has a missing dependency: 'handleClearData'
- Changing font size with respect to the change in screen resolution using styled-components in react
- getUserMedia API not working for iOS Safari in React
- Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. (it does remove the elements from the dom but only once)