如何仅使用 React JS 创建非 SPA 网站？

Question

我有一个使用 React 的简单测试项目，它显示了虚假 API 的用户。父组件名为 App，它是我的主页。 App 组件中有一个名为 panel 的按钮。我希望它在我单击时转到面板组件。

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/>


</>

很简单，但是我希望Panel组件是一个单独的页面，而不是主页的一部分！而且我不想显示其他组件（在我的项目用户组件中）

所以我尝试了一个技巧：使用 showPages 状态来确定应该显示哪个页面：

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/>}
 </>

现在当我点击面板按钮时，我可以看到面板页面是一个单独的页面，但是你猜怎么着：我错过了浏览器的后退按钮！我也不想使用基于 html 的项目并在其中使用反应。

是否可以使用纯 React 创建非 SPA 网站？或者我应该创建没有反应的项目并在其中使用反应。

Answer 1

我觉得用React的还是学Framework比较好。因为 React 不是 SEO 友好的。它没有任何服务器端渲染或静态服务器生成。它只提供客户端抓取和渲染。

您也可以试试 React Router。但是在某些时候，你会觉得很难用 React Router 维护路由。

如果你想学习使用 React 的框架，你可以试试 RemixJS。

Answer 2

终于找到方法了。我创建了一个名为 Home 的新组件，并将用户组件和面板按钮放入其中。我没有在 App 组件中渲染 home 组件，而是通过路由让 Home 组件成为首页：

<Route path="/" element={<Home Items={users}/>}/>

我还在App组件中路由了Panel组件

<Route path="/Panel" element={<Panel/>}/>

现在这是我的 App 组件：

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

这是主页组件：

const Home = (props) => {
  return ( <>
<button className='btn btn-primary' onClick={()=>{
  navigate("/Panel")
 
}}>Panel</button>
 <Users Items={props.Items}/>

</>
}

现在，当我单击面板按钮时，我将面板组件视为一个单独的页面 (non-spa)。如果您想拥有半水疗中心，您也可以使用儿童路线和出口（例如，如果你想在主页中呈现一些组件并将其他组件呈现为单独的页面 )

如何仅使用 React JS 创建非 SPA 网站？

how to create non-spa website only using react js?

javascript

single-page-application

reactjs