React-router-dom access pages only from app not from url - reactjs

Question

I'm new to react, react-router-dom and redux.
I'm wondering if I can add an route that can't be acceses from url, only from application.
Use case is that I'm tryng to build registration form page which will on succesfull registration send an verification code to email and application will redirect to page to enter that verification code.
I was thinking of making new verification code page but that page can not be accesssed from typing it in url, it should be accesed only from application.
Is that possible or should I take another aproach?

Answer 1

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>
);
}