I am following the Redux tutorial to understand how it works and to use it.
My code is on codesandbox. Link here.
In the App.js, there is 2 routes. The first route ("/") render 2 components in the same page, first one (AddPostForm) is a form do create a post, and the second (PostsList) is a list of posts. The second route ("/index") render just the PostsList.
So, when I open the 2 pages in my browser, and in the "/" I create a new post, this post show on the list of this page, but, when I check the "/index", the new post doesn't show up.
I want to know this is supposed to happen, and how can I make the PostList in the route "/index" to update too.
Thanks!
Related
I would love to implement the following behavior:
User comes to a screen at /list URL that stores its state in search params (e.g. a paginated list -> /list?page=2)
When the user clicks one of the list items, the URL changes to /list/1 and a modal opens. The list itself stays on page no. 2.
A modal itself stores some of its state in search params as well (e.g. /list/1?tab=first).
When the modal is closed, the user returns back to /list?page=2
I started with nested routes on a codesandbox, but I can't wrap my head around this.
What would be a good way to approach this?
Is it possible to view the list of paths in the history object? I can see that there is the length but I need to see the actual paths.
The reason for this is for debugging purpose. I have 2 views (SPA) that gets displayed via their corresponding URL. But my problem is when I go from the first page to the next page and then I wanted to go back to the first page, I need to click the browser back button 2 times before it goes back to the first page. That's the reason I wanted to see what are the paths in the history object so I can check what entries are being added because as far as I can see, the code I have to add a path to the history object is straightforward:
props.history.push("/classes/" + courseId);
That's just the code so I don't know why I need 2 clicks to go back to the previous page.
Not exactly sure how to see the history stack, but you might be unintentionally rendering the page twice, so the history.push is working as intended. You can log in componentDidMount to see if it does, and be careful when using useEffect because that can cause that as well. If you're using react router check how the route is added in your app.js (for ex do <Route path="/classes/:courseId" component={courseId}> instead of <Route path="/classes/:courseId" render={()=>courseId()}>.
If a user goes to a page that requires a context beyond what's on the url, I'd like to redirect them elsewhere. The use case is:
/todos/list - this page shows the user their list of todos. It contains links to:
/todos/edit?id=1 - this page allows the user to view/edit details about a particular todo.
If a user were to go directly to /todos/edit (with no id), I'd like to redirect them to /todos/list. I have tried doing this via navigate('list') conditionally in the constructor. This does update the browser url correctly, but it doesn't render the /todos/list page. Is this possible to do? Or is this not possible to do the para below?
I understand the more common url would be /todos/edit/1 so that reach router would handle my issue w/out me needing to deal with it. However, I'm just using this as an example of a piece of information required to render the page that isn't necessarily part of the the url path.
of course as soon as I type the question in stackoverflow, I find the answer is in the docs right in front of my face:
https://reach.tech/router/api/Redirect
So I am relatively new to the dynamic routing in React.js.
I have encountered one problem, which I cannot solve for about the last 2 hours.
I have a simple webpage with the blog posts on it and I wanted to create a 'Read More' route, which would redirect to the full article page.
So far, after clicking on these link, it redirects to the correct link, however, it does not display anything.
I have tried many things but I cannot see where the problem could be.
Could anyone take a look at this project and let me know why there is nothing being rendered? I believe it might be the problem with the improper importing but I cannot see where.
Please, see the GitHub repo of this project. There are App.js, Post.js, Postlink.js and Post.js that I wanted to connect with each other.
The Postlink.js is the page where I wanted to render full content of my post but it is not being rendered by React.
https://github.com/szygendaborys/LiderAPP
There are two problems:
1) Your Route match is wrong (you've written post/:id when it should be posts/:id):
export const POSTLINK = '/posts/:id'
2) In your Postlink componentDidMount(), you've need to call firebase.posts as a function
const ref = this.props.firebase.posts().doc(this.props.match.params.id)
(in your repo it is this.props.firebase.posts.doc)
It seems you've made a mistake with "export const POSTLINK = '/post/:id';"
Because when I click more, I go to '/posts/:id'; (watch the s). But when I try to change it, I get multiple firebase errors, which I have no knowledge about.
At least changing your route to:
"export const POSTLINK = '/posts/:id';"
Loads the right component.
Hope this helps.
I am trying to implement the React Router in such a way that it supports a route like this:
/myPages/:pageName1/:pageName2/:pageName3/...
The idea is that, even though the page being rendered is only the last page, the pages are nested, and the depth is not something that is pre-determined. The component that renders the actual page needs to know the names of parent pages.
To clarify, the idea is that the page data in the backend are in a tree structure in such a way that, in the above example, page1 is the root page, page 2 is a child of page1, page 3 is a child of page2, etc. In addition, one page can have multiple children. The last child name (so pageName3 in the example) is what is being used to query the database and get all the content required to render the full page. The parent names are required to render navigation-related subcomponent. I should also mention that just having /myPages/:pageName3 and getting all parent names from the backend is not really an option. I could fetch that information from the backend, but the URL presented to the user still needs to have that structure.
I am hoping that there's a way to get this type of information as an array, but I am having a hard time finding an example like this on the web.
maybe this can help.
https://github.com/ReactTraining/react-router/blob/d28d46dce08a5756a085f7e5eebb5169ea59e40b/packages/react-router/docs/api/Redirect.md#from-string
states:
A pathname to redirect from. Any valid URL path that path-to-regexp#^1.7.0 understands.
maybe you can combine
<Redirect from='/users/:id' to='/users/profile/:id'/>
with
var re = pathToRegexp('/:foo+', keys)
(taken from https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#one-or-more)
then you'll end up with
<Redirect from='/:pageName+/:id' to='/:id'/>