포트폴리오 만드는중입니다.
제가 하고 싶은건
메인홈페이지와 로그인페이지가 있습니다.
메인 홈페이지에서 버튼을 누르면 로그인페이지로 넘어가고
로그인 페이지(배경)을 그대로 프레임처럼 쓰면서 그 안에서
로그인 폼, 회원가입폼, 회원가입 성공했다는 컴포넌트를 위에 추가적으로 올려서
똑같은 로그인 페이지 프레임 안에서 컴포넌트 3개를 바꿔가며 보여줄 예정입니다.
추후 메인홈페이지 안에서도 메인홈페이지를 프레임처럼 해서
메인홈페이지 위에 올라갈 컴포넌트들을 바꿔가며 보여줄 예정입니다.
그런데 문제는 /rogin path로 이동했을때 첫화면에 프레임이 되는<LoginPage/>와 그 위에 올라갈 <LoginForm/> 컴포넌트를
동시에 보여주고 싶은데요 1개의 path로 여러개 element들을 한꺼번에 보여주고 그뒤에 로그인폼 안에서 버튼을 누르면
회원가입 폼으로 옮기는식으로 동작하게 하고싶은데요 잘 안됩니다..
설명 전달이 잘 됐는지 모르겠습니다. 좋은 방법이 있을까요?
우선
app.js 에선
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import './App.css';
import LoginPage from './routes/loginpage.js' //로그인프레임
import SignupForm from './component/signupform.js'; //회원가입컴포넌트
import SignupSuccess from './component/signupsuccess.js' //회원가입 성공 컴포넌트
import LoginForm from './component/loginform.js'; // 로그인 컴포넌트
import Homepage from './routes/homepage.js' //홈 프레임
function App() {
return (
<div className="App">
<Routes>
<Route path='/' element={<Homepage/>}>
{/* 추후 추가 예정 */}
</Route>
<Route path='/rogin' element={<LoginPage/>}>
<Route path='' element={<LoginForm/>}/>
<Route path='signup' element={<SignupForm/>}/>
<Route path='signup_success' element={<SignupSuccess/>}/>
</Route>
<Route path='*' element={<div>없는 페이지입니다.</div>}/>
</Routes>
</div>
);
}
export default App;
path 부분을 비워두니
이 상태에서 /rogin으로 접속하면 로그인 프레임만 나오고 로그인 폼이 동시에 나오긴 하는데.
로그인 폼 안에 있는 회원가입 버튼을 눌러 컴포넌트 전환을 시도 하면
'없는 페이지입니다' 쪽으로 들어가네요
loginpage.js에 폼들이 들어가야 할 부분에 Outlet설정도 해두었습니다.
아 그리고 추가적으로 메인홈페이지는 Homepage 입니다.
만약 할수만 있다면
Homepage를 nested 하면서
LoginPage도 독립적으로 nested 하고싶어요
