Overlapping of dynamic and static routes in next JS - javascript

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.

Related

Can I pull out URL parameters from different format than normally used on react-router-dom?

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.

NextJS URLs and dynamic routing to index route

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.

react router with dynamic routes give 404 on a browser direct link

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.

How to take user to a specific landing page using angularjs?

I am trying to replace an existing application with a new angularjs application. In existing application user comes to a specific landing page from external app through a specific url something like
'localhost:8080/APP_NAME/recordPage?recordId=ABC123'.
I am trying to implement new app using angularjs. I managed to build app to access
'localhost:8080/APP_NAME/#/recordPage?recordId=ABC123'
using angular routing mechanism. But is it possible to make url available exactly as it was before with out '#/'?.
In spring framework i can define it in controller to return to landing page directly, but is it even possible in angularjs to directly access specific page without going home page or index page?
localhost:8080/APP_NAME this is your context path and in angularJs '#' differ context path with specific accessing path.
So when ever you want to access another page it simply change the path after #, so it is easy to set state with particular url.
& if you don't want to go through '#' then don't declare your file path in index page and access it from outside.
This is resolved by creating a separate servlet to handle direct access using servlet annotations
'#WebServlet("/recordPage")'

Angular $locationProvider with ASP.NET MVC routing

I'm handling routing using ASP.NET MVC (using RouteCollection class). But my front end is written in angular and at some places I want to change url using Angular's $location and I want it to support HTML5, so I added this line to my module.config :
$locationProvider.html5Mode(true);
But since then it seems that my routing has been handled by Angular.
For example my SPA is on mysite.com/user and there I want to change url using Angular's $location (so when for example users click tab url changes to mysite.com/user/tab without reloading).
But when user navigates from that page to any other (for example mysite.com/other) I want that handled by ASP.NET MVC's routing.
What now is happening is that my url changes to mysite.com/other but website doesn't navigate to that page, i.e. MVC routing doesn't handle change.
EDIT
I don't have any routes defined in Angular, all my routes are defined on server side and server side routing just stooped working after I added $locationProvider.html5Mode(true);
No unfortunately not. If your angular SPA is hosted at foo.com with HTML 5 mode on, foo.com/spaRoute1 will hit your ASP.Net server and expect to find that route (likely controller=SpaRoute1 action=Index).
You will need to set your default route to always resolve to the controller/action that is responsible for serving up your SPA. All while defining any other routes that you need which are not specific to your SPA.
I don't know so much about ASP.Net. but the same problem I solved with node js like this.
I solved the same problem with push API enable to the server. Basically angular render the page at client side and find the exact route by #. you can enable html5 mode to remove #.
$locationProvider.html5Mode({
enabled:true,
requireBase: false
});
Remember don't forget to enable push API support at server side. just by adding
//To suport push API
// Just for DEMO in your case it may be different
app.use('/admin/*', function(req,res){
var user = req.session.user;
res.render("adminView",{user:user});
});
Here when you hard refresh or enter direct url into browser without # tag. server will render the home page(index) page and load your all required file. after that angular will handle all the routing for you because you have enabled html5 mode so no more need to add # in url.

Categories

Resources