Route Authorization#

Modern.js defaults to the convention-based routing based on React Router 6. For more details, please refer to Routing.

In a web application, if there are multiple routes, we may need to authorize access to some of them before accessing them. For example, in the following scenario:

• Access to the / route does not require authorization and can be accessed directly.
• Access to the /protected route requires authorization. If there is no authorization, it will automatically redirect to the /login route. After successful login, it returns to /protected.

import { Helmet } from '@modern-js/runtime/head';
import './index.css';

const PublicPage = (): JSX.Element => (
  <div className="container-box">
    <Helmet>
      <link
        rel="icon"
        type="image/x-icon"
        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
      />
    </Helmet>
    <h3>Public</h3>
  </div>
);

export default PublicPage;