получилось открыть сохраненные сниппеты

React/CodePen/src/components/routes.js

@@ -11,7 +11,7 @@ import {Redirect} from "react-router";
 import {useEffect, useState, useRef} from "react";
 import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
 import ChangePass from "../pages/changePass";
-import Project from "../pages/project";
+import CProject from "../pages/project";
 import CProjects from "../pages/projects";
 
 
@@ -37,11 +37,11 @@ const Routes = ({ isAuth }) => {
                 <ConnectedPrivateRoute exact path="/" roles = {['user']} component={Home} />
                 <ConnectedPrivateRoute path="/cabinet" roles = {['user']} component={ConnectCabinet} />
                 <ConnectedPrivateRoute path="/search" roles = {['user']} component={Search} />
+                <ConnectedPrivateRoute path="/project/:id" roles = {['user']} component={CProject} />
                 <ConnectedPrivateRoute path="/changePass" roles={['user']} component={ChangePass} />
                 <ConnectedPrivateRoute path="/projects" roles = {['user']} component={CProjects} />
                 <ConnectedPrivateRoute path="/login" roles = {['unknown']} component={LogForm} /> 
                 <ConnectedPrivateRoute path="/registration" roles = {['unknown']} component={RegForm} />
-                <ConnectedPrivateRoute path="/project" roles = {['user']} component={Project} />
             </Switch>
       </div>
     </div>

React/CodePen/src/pages/project.js

@@ -1,11 +1,11 @@
-import {useEffect} from "react";
-import {connect} from "react-redux";
-import {actionSnippetById} from "../actions/actionSnippetById";
-import {useState} from "react";
-import Editor from "../components/editor";
-import {actionSnippetAdd} from "../actions/actionSnippetAdd";
-import {Link} from "react-router-dom";
-import {Redirect} from "react-router";
+import {useEffect} 				from "react";
+import {connect} 				from "react-redux";
+import {actionSnippetById} 		from "../actions/actionSnippetById";
+import {useState} 				from "react";
+import Editor 					from "../components/editor";
+import {actionSnippetAdd} 		from "../actions/actionSnippetAdd";
+import {Link} 					from "react-router-dom";
+import {Redirect} 				from "react-router";
 
 const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, descriptionText, filesArr, nameText,}) => {
 	useEffect(() => {
@@ -58,18 +58,29 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
     <div>
         <Link to="/">
             <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
-                Back to Main Page
+               <span>&larr;</span> Back to Main Page
             </button>
-         </Link>
+        </Link>
+        <Link to="/projects">
+	        <button className="float-right btn btn-outline-info border-info mt-2 mr-2">
+	            All projects
+	        </button>
+	    </Link>
+
+        <br/>
+        <div>
+        	<h3  style={{marginTop:'30px', marginLeft: "20px"}}><u>Name of this project:</u> &nbsp; <i>{title}</i></h3>
+        	<iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%" height="100%"
+                style={{height: "280px", marginLeft: "2%",marginTop: "40px", border: "5px solid green"}}/>
 
-        <br />
-        {files?.map((data, index) => (
-            <>
-                <Editor onDelete={() => setFiles(files?.filter((item) => item !== data))} data={data} 
-                    onChange={({type, name, text}) => setFiles([...files.slice(0, index), {type, name, text}, ...files.slice(index + 1),])}
-                />
-            </>
-        ))}
+	        {files?.map((data, index) => (
+	            <>
+	                <Editor onDelete={() => setFiles(files?.filter((item) => item !== data))} data={data} 
+	                    onChange={({type, name, text}) => setFiles([...files.slice(0, index), {type, name, text}, ...files.slice(index + 1),])}
+	                />
+	            </>
+	        ))}
+        </div>
 
       	<br />
 	    <div style={{alignItems: "center", textAlign: "center", marginBottom: "10px"}}>
@@ -77,18 +88,8 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
 	          <button className="btn btn-primary" onClick={() => setFiles([...files, {type: "html"}])} key={files}>
 	            Add editor
 	          </button>
-	          <iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%" height="95%"
-	            style={{marginTop: "10px",border: "1px solid #F0FFFF",boxShadow: "0px 5px 10px 2px rgba(34, 60, 80, 0.2)"}}
-	          />
-	          <div>
-	            <Link to="/projects">
-	              <button className="btn btn-outline-info border-info mt-3">
-	                All projects
-	              </button>
-	            </Link>
-	          </div>
 	        </div>
-	        <div className="input-group mb-3 mt-5 ml-auto mr-auto w-25">
+	        <div className="input-group mb-3 mt-5 ml-auto mr-auto w-50">
 	          <div className="input-group-prepend">
 	            <span className="input-group-text" id="basic-addon1">
 	              Name of your project
@@ -104,7 +105,7 @@ const ProjectSnippet = ({onSave, getSnippet, match:{params:{id},}, titleText, de
 	          <textarea value={description} onChange={(e) => setDescription(e.target.value)} className="form-control "
 	            aria-label="With textarea" placeholder="Your description"></textarea>
 	        </div>
-	        <button className="btn btn-success float-right mr-5 mb-5" onClick={() => onSave(title, description, files, id)}>
+	        <button className="btn btn-success float-center mt-5 mb-5" onClick={() => onSave(title, description, files, id)}>
 	          Save project
 	        </button>
 	    </div>