Для создания страницы с имитацией авторизации как главной страницы при запуске приложения в React, можно использовать условный рендеринг.
Пример кода:
App.js
```jsx
import React, { useState } from 'react';
import HomePage from './components/HomePage';
import LoginPage from './components/LoginPage';
const App = () => {
const [loggedIn, setLoggedIn] = useState(false);
return (
<div>
{loggedIn ? <HomePage /> : <LoginPage setLoggedIn={setLoggedIn} />}
</div>
);
}
export default App;
```
LoginPage.js
```jsx
import React from 'react';
const LoginPage = ({ setLoggedIn }) => {
const handleLogin = () => {
// Здесь можно добавить логику для имитации авторизации
setLoggedIn(true);
}
return (
<div>
<h1>Login Page</h1>
<button onClick={handleLogin}>Login</button>
</div>
);
}
export default LoginPage;
```
HomePage.js
```jsx
import React from 'react';
const HomePage = () => {
return (
<div>
<h1>Home Page</h1>
<p>Welcome to the home page!</p>
</div>
);
}
export default HomePage;
```
При первом запуске приложения, на странице будет отображаться компонент LoginPage. После нажатия кнопки "Login" произойдет имитация авторизации и страница переключится на компонент HomePage.
Если необходимо настроить переход на страницу авторизации при первой загрузки приложения, можно добавить логику проверки авторизации в компонент App и установить состояние loggedIn в зависимости от результата этой проверки.