So, I'm trying to create a blog page listing.
If someone clicks a particular blog changing the route to /title/the-title-of-the-blog, and in the route file I have route as,
<Route path='/title/:title' component={BlogMicroSite}/>
it's working fine. But, If I try reaching out /title/some-tile-of-blog directly it's not working. One solution is to use HashRouter but it adds a # to URL which is not SEO friendly at all. Please Help me with some solution without # or how I can remove # in the URL.
Related
I'm new to React and Next.js, but after following the doc of dynamic routes I've successfully created a subpage catching all routes, and beeing able to get that on the server side. see the image:
My problem is that I'd like to have this behaviour from my index.tsx page, to be able to catch everthing on the home page and get the full url. What I've done is rename my index.tsx to [...].tsx and it redirects well to the home page no matter the route. The issue by doing that is my function getServerSideProps is called twice and I've no ideas why.
How should I do to be able to catch every routes from my homepage and get the complete url ?
Thank you !
I've found that there is nothing wrong with the code, my issue was a chrome extension.
I've now a page page/[...alias].tsx catching all routes with no problems :).
I'm trying to expand a bit on the nested routes example over at react training in the quick start guide.
Code sandbox: https://codesandbox.io/s/routing-test-ubpjp
In the code sandbox browser, if you navigate to /some - this works, then click SomeOne - this also works. However, clicking "SomeTwo" which should redirect to "Some" loads blank, why?
Also, those links fail to work right off the bat? There might be some strange stuff in the sandbox as I've been hitting it with random stuff to try and get it working.
I just want to structure the routes such that I don't have to have all of these routes in one file.
I've done a lot of searching and have tried a lot of different kinds of implementations, but all of them end up having issues / problems, either with adding a catch-all route, or redirects.
Removing the props from the Switch worked, but this breaks the AnimatePresence from framer-motion.
Following the example of framer-motion at: https://codesandbox.io/s/framer-motion-x-react-router-n7qhp?file=/src/index.js
The redirect still fails, even with the withRouter hook on the Navigation and redirect component.
You need not pass any props to Switch component. Also make sure that you are rendeing Navigation component as a Route or use withRouter HOC, so that it received Router props.
<Switch>
{children}
</Switch>
I am trying to learn react router 4 but meet some problems. I follow the guide from here https://reacttraining.com/react-router/web/example/no-match, and yes this example works fine in my browser. I can click the links and get things shown in the browser.
but, if I type in the url in the browser instead of click the links, the page shows NOT FOUND
NOT FOUND page
What's happening? Does React-router can only use links instead of typing in URL??
Stijn de Witt explain about this "problem" here: https://stackoverflow.com/a/36623117/8272354
When you initialize with the URL in the "inital route" of your route system, all the routes "know" how to deal with Router Links. So, the React Link does't refresh the browser, just change the route internally in javascript and load the specifyc route. This way everything works fine.
But, when you type the route (not the "initial route") directly in the URL, the router system does't understand that route, and the browser will try get this page in the server.
I'm trying to redirect non-matching urls to a specific route using React-Router. For example, if user navigates to https://www.mysite/com/no-match and I don't have a corresponding route set up, it should push them to https://www.mysite/com/home.
I'm sure there's a way to do this but can't find it in docs.
For any AngularJS folks, this would be equivalent to $urlRouterProvider.otherwise('/home')
Any advice is appreciated!
There is a subcomponent of React Router that is perfect for this. You're looking for the Redirect component: Redirect Docs.
You can place this as a child to the route that you want to redirect and it should take care of this functionality for you.
Im not sure whats going on here. But all the information is in this gist:
https://gist.github.com/Munsterberg/1f72e11226173749c8472217132d4c68
You can see the comment with an image that shows the URL that it adds an extra /admin/ in the redirect. When I visit equipment/new route which has the same format as the Link I am using in the gist, it works fine. Also if I visit the route and go back and then forward it cant find the route location. If I take away the admin in the Link it doesnt match any routes at all.
Try changing the link to
<Link to={`/admin/forum-administration/${props.forum.forumNo}/threads`}>{props.forum.description}</Link>
Which renders route from the root.
Since your
<Link to={`admin/forum-administration/${props.forum.forumNo}/threads`}>{props.forum.description}</Link>
pushes the router to link admin/forum-administration/${props.forum.forumNo}/threads that appends to current parent route /admin/...