I'm trying to route my blog posts from /blog/[slug] to /[slug]. Is there a way to do that? I've looked at the NextJS docs, but the examples show only nested url paths.
For example, on my /blog page, a list of Posts is shown. I want to be able to click on a post and go to localhost:3000/my-blog-post instead of localhost:3000/blog/my-blog-post. How would I go about doing that? I'm using the Link component if that makes a difference.
Edit with updated info:
I've tried the as prop on Link and Next requires it to be in the nested path format otherwise it throws an error.
Related
I'm working on an Instagram clone (Just because I want to learn more about Next.js) and I want to manage the image uploads. Just want the user to upload his image and redirect it to the "create new post" page. The thing is, I don't know how to send the image between pages. I thought of doing a rest API to temporarily store the image and retrieve it, but that seems to be far too complicated. Does anyone have any idea of how I can implement this? I'm using Router from next.js if that helps.
Multiple ways depending your needs. You can try one of these.
Use React Context or a state management tool.
When routing from Page A to Page B, pass your data with querystring. Mask it with "as" prop if you dont want it to be shown on URL. If data is too big; pass it as a Blob URL. Then read query on the second page.
https://nextjs.org/docs/api-reference/next/router#routerpush
Use localStorage. This is probably shortest way.
We're about to relaunch an existing website, that was previously a wordpress site and now is going to be a react site.
The routing is done via react-router-dom and there are a couple of pages which will render dynamically depending on the parameters in the url.
There is one page that is basically used for a user to put in their data and sign up. This component has two parameters, one which is the user-id and another one.
The link to that component gets sent out to people who have previously expressed interest through the website and then gets mailed to them. This component also existed on the wordpress site, but lived on a very different route.
So now when we relaunch we want to make sure people with the old link still get redirected to the new, correct component instead of getting a 404.
My question is now, is there a way for me to redirect from the old url (which also contains both parameters in the slug) to the new one while passing on the parameters?
The old url looked like this:
.com/confirmation-FIRST_PARAM/?IDref=:SECOND_PARAM
The new url for rendering this page looks like this:
.com/confirmation/:FIRST_PARAM/:SECOND_PARAM
My first naive approach was to just create a new route in my App.js file like so:
<Route
path="/confirmation-:firstParam/?IDref=:id"
component={Confirmation}
/>
which doesn't work. I guess that's because it's not really complying with how parameters are passed in react-router. Is there a way to redirect users to the appropriate new page?
I now managed to get it to work, but I don't think it's the smartest way possible (or at least it feels like there should be a leaner solution).
I added another route for the old links and then within the component I am using the useLocation() hook to figure out at which pathname the component actually gets rendered.
Depending on that I set the first parameter. The user id is then extracted by using the search property of the location object:
oldId = location.search.split("=")[1];
Using the old id, the other param (pkf) and the useHistory hook I then redirect to the new route:
history.push(`/confirmation/${oldId}/${oldPkf}`);
Whenever now a user accesses the component through an old link, the parameters get pulled from the location and the user gets redirected to the new link.
Overview:
I got this route in my react application
example.com/routeName/:id
This is the entrypoint for my users, they click on the link and see a screen with informations provided by this hash in a right sidebar component.
example.com/routeName/94a31bb9-e6ae-4e9a-8749-0807f9efd0001
Below I attached a kind of wireframe, trying to be more clear about the sidebar:
Wireframe to understand how my app components are shown at the end, and why the hash is important in a visual way
This works fine, I can get the hash and make the request inside my dumb component to display data.
The problem:
I'm doing the fetch to the api in my Layout component, and passing down the data via props to my sidebar that is fixed in my layout, because it is displayed through all the user experience
When my user sign in, my route change, from:
example.com/routeName/94a31bb9-e6ae-4e9a-8749-0807f9efd0001
to:
example.com/nextRouteNameHere
I still see the component with the information I need, but if I refresh the page at the second route, the app crashes, because my sidebar cant find the hash to fetch my api and get the necessary data.
What I've been trying to do:
Persist this route with the hash and make the route change internally - but that doesn't makes sense to me at all, and I could not find any resources even close to this strategy.
Persist this hash in localstorage and get the hash with hooks inside the sidebar. This way if I can't find my hash at the url it'll be in the localstorage and I can fetch my api to get the data. I did it, but doesn't work because the components presents the some behavior, trying to render with no data.
As I'm using redux to manage the global state I've already taken the hash and the fetch response to the localstorage, this way I can take this data through all the aplication, but the hash is what makes my hooks update when I tried to wrote this strategy, and when the user updates the page I got the same behavior, because the hook could not find the :id on the url.
Final question
How can I persist the sidebar with the fetched data I did when I load the page?
NOTE
I did not post the code because at this moment I got too much code trying to solve this and I'm stuck in this problem for almost one month. I'll update this post later on.
I created a nextJS application and using its routing system there. Now I have created a dynamic route to catch a URL like {base_url}/{username}/{post-slug}. But it is also capturing {base_url}/post/create which I want to be rendered on different page.
So is there anything available in nextJS route to match a URL absolutely? Like, exact in react router? Or do I have to redirect user from getInitialProps function in nextJS?
I created sample codesandbox for this question.
It works without Regular Expression. Always the specific route (post/create) has the priority.
I hope this helps you.
I have a React Front-end connected to Wordpress API and the routes are defined in clientside with React Router. When i use Link to direct them to dynamic routes they work fine. But when i use browser address bar directly to access the links pressing enter, or i refresh.i get
404 page not found
and i got to know that is because a direct call to server is happening and the there's no javascript to manipulate the react-router actions on the shared host when we have a PHP Server on that.
Thought about react-snapshot but its not going to suit the dynamic nature from the API.Please can anyone i give a possible way to go around this issue?
Check this out: https://github.com/rafrex/spa-github-pages
The concept might help you.
When the GitHub Pages server gets a request for a path defined with frontend routes, e.g. example.tld/foo, it returns a custom 404.html page. The custom 404.html page contains a script that takes the current url and converts the path and query string into just a query string, and then redirects the browser to the new url with only a query string and hash fragment.