I have a simple test project using react that shows users of fake API. The parent component is named App and it's my home page. There is a button named panel in the App component. I want it to go to Panel Component when I click it.
function App() {
const users = useSelector(state => state.users)
const dispatch = useDispatch();
const getUsers=()=>{
// async action using redux-thunk
return async function(dispatch){
try{
dispatch(GetUserRequest())
const response= await axios.get("https://reqres.in/api/users?page=2")
dispatch(GetUserSuccess(response.data.data))
}
catch(er){
dispatch(GetUserFail(er))
}
}
}
useEffect(()=>{
dispatch(getUsers())
}
,[])
return (<>
<Provider store={store}>
<Routes>
<Route path="users" element={<Users Items={users}/>}/>
<Route path="/Panel" element={<Panel/>}/>
</Routes>
<button className='btn btn-primary' onClick={()=>{
navigate("/Panel")
}}>Panel</button>
<Users/>
</>
It's simple, But I want the Panel component to be a separate page instead of being part of the home page! And I don't want to show other components (in my project User component)
So I tried a trick: using showPages state to determine which page should be shown:
function App() {
const users = useSelector(state => state.users)
const[showPages,setShowPages]=useState("users")
useEffect(()=>{
setShowPages("users")
dispatch(getUsers())
}
,[])
return (<>
<button className='btn btn-primary' onClick={()=>{
setShowPages("panel")
}}>Panel</button>
{showPages=="users" && ( <Users/> Items={users})}
{showPages=="Panel" && <Panel/>}
</>
Now when I click the Panel button, I can see Panel page as a separate page, But guess what: I missed back button of the browser! I also don't want to use html-based project and use react in it.
Is it possible to create non spa website using pure react? or I should create project without react and use react in it.
I think It would be better to learn Framework those uses React. Because React is not SEO Friendly. It had not any Server Side Rendering or Static Server Generation. It only provides Client Side Fetching and Rendering.
You can also Try React Router. But At some point, you would feel Hard to Maintain Routes with React Router.
If you want to Learn framework which uses React, You can try RemixJS.
Finally, I found a way. I created a new component named Home and I put User component and panel button in it. Rather than rendering home component in App component, I made Home component home page by routing:
<Route path="/" element={<Home Items={users}/>}/>
I also routed Panel component in App component
<Route path="/Panel" element={<Panel/>}/>
Now here is my App component:
function App() {
const users = useSelector(state => state.users)
const dispatch = useDispatch();
const getUsers=()=>{
// async action using redux-thunk
return async function(dispatch){
try{
dispatch(GetUserRequest())
const response= await axios.get("https://reqres.in/api/users?page=2")
dispatch(GetUserSuccess(response.data.data))
}
catch(er){
dispatch(GetUserFail(er))
}
}
}
useEffect(()=>{
dispatch(getUsers())
}
,[])
return(<>
<Routes>
<Route path="/" element={<Home Items={users}/>}/>
<Route path="/Panel" element={<Panel/>}/>
</Routes>
</>)
}
And here is Home component:
const Home = (props) => {
return ( <>
<button className='btn btn-primary' onClick={()=>{
navigate("/Panel")
}}>Panel</button>
<Users Items={props.Items}/>
</>
}
Now when I click Panel button I see Panel component as a separate page (non-spa). You can also use child route and outlet if you want to have semi spa site( for example if you want to render some components in home page and render others as separate pages )