I have an issue with a project I'm working on.
I tried to implement "dynamic" routing and rendering of components, but it seems to just not work.
I have added a sandbox link containing some of the routes and basic components along with the structure I was going for.
It seems as if I hard code the routes and components to render, everything works, but when I use the component that accepts the component, it won't render. I am not sure why.
I would appreciate any help or insight anyone is willing to give.
Edit on sandbox
Related
I have forked this sanbdbox in order to re-build it into a functional component for a project. But I am not sure why it is not working properly! If you compare it side by side you might see something I don't at the moment.
For example I drag the node and nothing changes at all.
Here's my repo in GitHub or a CodeSandBox.
Any help would be appreciated! :)
I did try to refactor it into a functional component but I am missing something.
Hope you are doing well!
I found different ways of navigation in React Js.
For example
Using Link, NavLink, Redirect Component, history.push and history.replace.
I am a bit confused, which method is perfect or recommended. Thanks.
I'm new to React as well and I think using any sort of Link/Navlink along with the Switch Route is a good way. It helps me sort of modularize the routing, no matter where the path changes from.
As a new learner, you only need to know <Route>, <Switch>, and <Link>. And also <Link> and <a> difference. The rest you mentioned comes with intermediate level React. So, I kindly advise you to take it bit by bit and also try to make your questions more to the point as editor noted in comment.
I have created one search component using stencil and I'm integrating this stencil codebase with my react application via cdn link. I'm displaying the search component(which was created in stencil) as below in my react codebase :
<custom-search placeholder="Search"></custom-search>
The search component contains a search icon. I need to pass the text in search input field to my react code on click of this icon. How can this be achieved?
Unfortunately I haven't integrate Stencil JS component with React, but passing string data to web component should be working without too much hassle. Do you know if your React app can properly recognize your custom-search component? If not, then you might want to take a look at a link to Stencil JS official document of integrating Stencil JS component to React and make sure component get properly loaded and integrated.
If you know for sure you load the component then not sure why your placeholder is not set within your component - it is just a string after all. Maybe post the custom-search component code, as there might be issue with that (i.e. component lifecycle event you are using might not be doing what you expect to do)
Could you clarify the actual problem, please? :)
Does the component not get rendered, or are you unable to achieve communication from custom-search to the React app?
If the latter is the case, you might want to implement a Custom Event on the Stencil component, to communicate changes back to the consuming app.
As #tomokat mentioned, you should follow the official Stencil React integration docs. This is required, since React cannot handle Custom Events natively, and requires some help from the dev.
Edit: Sorry, I got confused by the first answer. Your title is quite clear, though. If you can show some example code of the component and the React integration, we could probably help in a better way.
I am trying to build an App that takes advantage of the SSG functionality of next js and shows multiple Page components at the same time. Each of the components should be static and come with their own data.
The problem is that I don't know how to persist the first Page component when the route for the second Page component is called. Putting it into state works, but according to the react docs this is not a good idea. Of course I could simply get the data out of the props for the Pages and make the client render the component but this solution doesn't exactly take advante of SSG.
I made a codesandbox that shows what I'm trying to achieve by putting the pages into the state of the Layout component:
https://codesandbox.io/s/elegant-lichterman-v70zl
Is there a way to achieve what I'm trying to do whithout using state?
Or is using state in this way a feasible exception?
Or am I on the wrong track entirely?
Any help would be highly appreciated!
My question seems a bit vague, first let me explain what I want to do with an image:
You can see here
I have a container component, lets say Stars. Inside that component I have two others are being rendered: Actors and Actresses. As you can see there are links to Movies and TV Shows, which are also two components. What I want is when I click to Movies it will render on to Actors without rerender Actresses. Same thing goes for Actresses.
At that point, I have some basic knowledge for React and React Router. I tried my luck with Routes and Switches but I can't get to work it. Here is my question, is this possible? If yes, what can/should I use? States or any other method I don't know yet (like Redux)?
Or my strategy is not a good one? ie, this is not possible without rerendering the container component?
My React version: 16.0.0-alpha.12
My React Router version: 4.1.1
Edit: I changed the question a little bit. In the original one I asked the question with the phrase "without changing URL". But, this is not my main point. I just want to swap components without rerendering the other ones in the container.
This can be handled through state in the container, however assuming you want to do that through URLs, React-Router comes with an option for nested routes.
https://github.com/reactjs/react-router-tutorial/tree/master/lessons/04-nested-routes
if you create a routes for actors and a route for actress, this might be possible to achieve.