Cannot Read Property 'history' of Undefined Linkcontainer
NPM Audit issues on starting time install of single-page-app:
A)
│ High │ Prototype Pollution
│ Package │ dot-prop
│ Patched in │ >=5.1.1
│ Dependency of │ infrastructure-scripts [dev]
B)
│ High │ Prototype Pollution
│ Package │ lodash
│ Patched in │ >=4.17.eleven
│ Dependency of │ infrastructure-scripts [dev]
C)
Moderate │ Cross-Site Scripting
│ Package │ serialize-javascript
│ Patched in │ >=ii.i.i
│ Dependency of │ infrastructure-scripts [dev]
August vii, 2020 at 12:11am
Simplifying the startup instructions would be helpful.
a) in the readthedocs page this: "Please follow the general installation instructions: ../installation." only on Github this link goes nowhere.
b) "stackname" is a term not generally used in reactJS apps. It would be helpful to understand the relationship of the stackname to the name of the app. in ReactJS the app name in the file construction is, I guess, the stackname. But in the spa case, these names are different. Its easy to fix, but ameliorate to avoid having to do so.
c) This: "The SinglePageApp-component further requires the serverless-single-folio-app-plugin equally a devDependency:" (just this is already in package.json)
d) for newbies, it is not clear that { stackname } in the build / run commands means just "stackname" without the curly braces.
In your book you explain things very clearly - a pleasant surprise in this low-doc / no-physician opensource environment. Nevertheless, in my feel, the critical stage is the initial setup - if this is not very articulate, and written without any assumptions about the expertise/experience level of the user, the project may never become off the footing. Some minor changes to the installation instructions would make this less stressful...
Nevertheless, I practice now have the spa app running. Now I just take to figure out how to integrate my navbar with your Medium article "how-to-create-a-navigation-bar-with-react-router-styled-components-and-infrastructure-components" handy.
I remember the infrastructure-components idea is a significant and heady step frontward for reactJS. :-)
I am following the navbar implementation in your Medium article. When I change the code for the ii routes in index.tsx it does not then work properly. If I enter only this: http://localhost:3000/#/ I get nothing. If I enter this: http://localhost:3000/#/other it works as earlier. if I enter http://localhost:3000/#/right I get this:
NavBar Positioned at the right-paw side
And cipher on the right.
The navigation code at this time is as per the commodity
When I add together the further code cake: Automatically Populating the Navigation Bar - zero works any more than.
It would exist helpful if at that place was a final example of the code in case I messed upward the changes.
As well, I judge that the alert messages virtually the out of appointment dependencies might point to a factor hither.
This in Hyper:
WARNING in ./node_modules/infrastructure-components/dist/libs/loader.js 20:37-sixty Disquisitional dependency: the asking of a dependency is an expression @ ./node_modules/infrastructure-components/dist/assets/spa.js
The commodity finishes at this point, leaving me uncertain how to go along... My environment has private "pages" as components in src/components. The Navbar sits with some other objects in a src/component file Header.js. When a user clicks on a tile in the NavBar the app should export the navbar to Header.js with the page name of the requested page and then exports the Header & Page to another component called PageAssembly.js. However this is non working because the user click activity (on-Click in the div) is handled in a child function in Navbar.js and, as a child part, it cannot return or consign anything to annihilation else.
I was hoping that this article would provide a solution but I cannot see how to map my construction on this code even if it works when the dependency issues are resolved.
Perhaps I can telephone call the navigation component with the pageName as a prop and import the Header component and render Header & Page? If the code was working I would play around with information technology - but right now I can't do anything...
How-do-you-do, first of all: Cheers for all your feedback! This is really helpful for me to further improve infrastructure-components.
To point 1: The audit issues. I am currently working on that. But some of the used libraries introduce breaking changes. Thus, it is quite some piece of work to go these issues out of the way. Just I aim to get them washed
To point 2: The piece of cake introduction. Of course it is my responsibleness (as an author) to make things clear. I volition try to become these things directly.
Good to hear from you. Are you lot in Frankfurt? I am in Sydney :-). Is it possible to add a link to the required folio in the on-click function in the div? This seems to exist a pigsty in reactJS for single page apps...
If localhost:3000/#/other and localhost:3000/#/rightwork but localhost:3000/# does not, then I'd assume there is no <Road path='/' .../> as a child of your <SinglePageApp/>
Having private pages should be no problem. But you'll demand a <Route /> component for each of them. The respective <Route component={YourComponent}/> then points to the actual page
I live in Berlin. Not far away from Frankfurt :-) Using links in the div should work like this:
import { useHistory } from "react-router-dom";
function ClickableDiv() {
const history = useHistory();
part handleClick() {
history.push("/your-path");
}
return (
<div type="push" onClick={handleClick}>
Go dwelling house
</div>
);
}
I have been many times to Berlin (i of my favourite cities) and also many times to Frankfurt and Köln (I have a good friend there, besides in IT). My granddad was linguistic communication principal in the U.k. and studied the German language linguistic communication in Berlin. My mother spoke High german earlier she spoke English :-)
Thanks for the advice on the link. I think I tin also laissez passer a prop? I need to link to the PageAssembly component file and tell it which folio to adhere to the Header/Navbar before rendering it...
I am enjoying your volume...
Let me know the next time you are hither, if you like. I've been once in Sydney. cute city and great people. The ClickableDiv from above is a normal (functional) React component. You can pass backdrop as usual. If you like to provide arguments to the called folio, you could either use path- or query-parameters. Or, since it is all within your app, you could add some land to a global redux shop.
Yeah, Sydney is very beautiful, though it is quite common cold at the moment! Not as cold as Berlin though... haha. It was -3 degrees when I arrived last time and I had to go out and purchase a thick padded jacket. I wear it here sometimes just its a bit likewise warm for Sydney...
With regard to the bug with Infrastructure Components and dependencies, is this happening considering I-C is nonetheless in evolution? I would exist concerned if I built and sold a website which and then fell over considering of changes to the dependencies. How will y'all manage this in a production surroundings?
I accept a question about isomorphic websites and server-based rendering. My agreement was that the server provides html-simply in response to user requests and that all the JS code resides on the server where information technology is less likely to be hacked. I also understood rhat this was better for SEO since all the crawlers tin read HTML. But your clarification is somewhat different, with no HTML being on the front end and thereby requiring keywords in the index.tsx file.
Also, in an Isomorphic envoironment, is information technology possible to selectively render chunks of lawmaking on the server, with others rendering on the forepart? I ask because I have an animated logo in the header using Three.js and rendering at 65cycles per second and I am wondering how that would work in an isomorphic environment...
I will look you up next time I am in Berlin :-)
Stephen
August nine, 2020 at 12:09am
Haha... Nothing is e'er easy in this crazy react world...
office ClickableDiv() { const history = useHistory(); function handleClick() { history.button("/your-path"); } render ( <div blazon="button" onClick={handleClick}> Go dwelling house </div> ); }
I f I create this with handleClick as a nested child function of ClickableDiv, handleClick is no longer visible.
If I split them equally two child functions in the Navbar component I become an error virtually using history.
This is what the divs wait like currently...
<div className= "flex-container-navbar">
<>
<div
id="Tile1" className="linkcontainer"
onClick={HandleClick}
onMouseEnter={e => HandleMouseEnter(east)}
onMouseLeave={east =>
HandleMouseLeave(e)}>Dwelling house
</div>
<div
id="Tile2"
className="linkcontainer"
onClick={HandleClick}
onMouseEnter={due east => HandleMouseEnter(eastward)}
onMouseLeave={e => HandleMouseLeave(eastward)}
>About
</div>
...
I am exporting everything to App.JS which looks like this:
... import statements for all components
function App() { return ( <div className="App"> <HeaderLogoNavbar /> <BrowserRouter> <Road path="/" verbal component={Home}></Route> <Route path="/about" component={About}></Route> <Route path="/technology" component={Technology}></Route> <Route path="/marketing" component={Marketing}></Road> <Road path="modules/" component={Modules}></Route> <Route path="/emgage" component={Appoint}></Road> <Route path="/admin" component={Admin}></Route> <Route path="/weblog" component={Blog}></Road> </BrowserRouter> </div> ); }
consign default App;
If I motion the useHistory to the kickoff of NavBar that mistake goes away simply now, even hardcoding a route, I get:
TypeError: Cannot read property 'push button' of undefined HandleClick src/components/Navbar.js:250 247 | permit pageToRender = "Home"; 248 | if (event.target.id === "Tile2") { pageToRender = "/About"; } 249 | console.log("handleClick: Rendering page [" + pageToRender + "]");
250 | history.push("/");
I get the aforementioned with .push button(Nigh) ,push("About") or .push("/About" or .button("./About"...
Oh, for a proper manual!!
August 11, 2020 at 6:04am
In React, you tin can only use hooks (including useHistory) in a Component. Thus, yous can't move information technology out. Tin can't you lot movement it into the component that renders:
And y'all provide the path equally an argument
function TopComponent = props => {
const history = useHistory();
function handleClick(path) {
history.push(path);
}
return<div className= "flex-container-navbar">
<>
<div
id="Tile1" className="linkcontainer"
onClick={()=>HandleClick("somepath")}
onMouseEnter={e => HandleMouseEnter(east)}
onMouseLeave={east =>
HandleMouseLeave(east)}>Abode
</div>
<div
id="Tile2"
className="linkcontainer"
onClick={()=>HandleClick("otherpath")}
onMouseEnter={e => HandleMouseEnter(e)}
onMouseLeave={due east => HandleMouseLeave(e)}
>About
</div>
Edited
Baronial 15, 2020 at four:04am
Thanks and so much for this. It'due south a possibility, though the navbar currently exports to Header.js where it is integrated with the other header elements... I would have to figure out how to make that piece of work... But I am pretty certain I won't be able to add together the navbar inside a container in the header in one case information technology is Index.js where the rendering occurs...
In the spa-instance, the route is selected in Navigation.tsx and rendered in index.tsx - I was trying to follow this logic...
I moved the router code to index.js but I remember I am nonetheless snookered - I can either export the route or the navbar, but not both... I call up this is merely a reactJS flaw - ane of many! You can employ the router, but only if you will accept a trivial navbar...
August fifteen, 2020 at 4:22pm
Why tin can't you export both? Also the default export, you tin consign (as named export) equally many components every bit you similar.
August 15, 2020 at 11:35pm
Ha! Yep, but if I export the navbar to alphabetize.js where the routing code resides, I will become 2 navbars (ane in the Header, and another one in index.js). Or I have to live with a navbar outside the header, which I don't want. Only I might have a solution - the issue with the navbar currently is that the on_click updates land at a local level, and and then the Navbar does not consign itself along with the name of the page (as a named consign).
Merely i establish an article which seems to solve my trouble - by shifting the local land (from HandleClick) to the parent (Navbar.js) and therefore, hopefully, forcing Navbar to export then that my required page can be added past the Header.js code... I am nearly to try that out. The article is specifically well-nigh this issue, which means that other people have the same consequence with router... https://vegibit.com/create-a-navbar-component-in-react/
August sixteen, 2020 at 8:48am
It must be quite old - the language is all this.blah and "extends.component"... I never worked in the pre-hooks react environment so this is all double-dutch to me... There is so much out of engagement stuff on the net!
I can't make it work anyway. :-(
Baronial 16, 2020 at half dozen:21pm
can you share the source code with me? If you get ii navbars, information technology sounds to me as if y'all were rendering it at two points. Export/Imports shouldn't do that.
Prove more than messages
Source: https://spectrum.chat/infrastructure/help-and-support/npm-audit-issues-on-first-install-of-single-page-app~f9672f33-f638-4132-ad63-39de77bb4f92
0 Response to "Cannot Read Property 'history' of Undefined Linkcontainer"
Post a Comment