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/...
Related
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.
There seems to be some confusion with what to use over the other:
<Link to='/some/path'>
<Redirect to='/some/path'/>
history.push('/some/path')
I have been using React/Router for a little while now, and different posts/answers say different things regarding when to use these, and sometimes they don't line up with what someone else said. So I think I need some clarification on this.
From what I understand about Link and this documentation it:
Provides declarative, accessible navigation around your application.
From what I understand about Redirect and this documentation it:
Will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.
It seems like all the posts I have read almost everyone uses Redirect to navigate around there application, and no one ever recommends using Link like in this post.
Now history can do the same thing as Link and Redirect except I have a history stack trace.
Question 1: When would I want to use Link vs Redirect, what's the use case over the other?
Question 2: Since history can route a user to another location in-app with the added bonus of the history stack, should I always just use the history object when routing?
Question 3: If I want to route outside of the app, what's the best method to do so? Anchor tag, Window.location.href, Redirect, Link, none of the above?
First off, I would really recommend reading through this site:
https://reacttraining.com/react-router/web/api/BrowserRouter
React Router's BrowserRouter maintains the history stack for you, which means that you rarely need to modify it manually.
But to answer your questions:
Answer 1: You'll want to use Link or NavLink in almost all use cases. Redirect comes in handy in specific situations though, an example is when a 404 page is rendered when the user tries to access an undefined route. The Redirect will redirect the user from the 404 route to a new route of your choosing, and then replace the last entry in the history stack with the redirected route.
This means that the user will not be able to hit their browser's back button, and return to the 404 route.
Link NavLink and Redirect all use the router's history api under the hood, using these components instead of history manually means that you are safe to any changes to the history api in the future. Using these components future-proofs your code.
Answer 2: BrowserRouter Maintains the history stack for you, generally my opinion is that you want to stay away from manually updating it where you can.
Answer 3: Here are a few examples for external react links:
<Route path='/external' component={() => window.location = 'https://external.com/path'}/>
<a href='https://external.com/path' target='_blank' rel='noopener noreferrer'>Regular Anchor tags work great</a>
target='_blank' will open the link in a new tab, but please make sure to include rel='noopener noreferrer' to prevent against vulnerabilities
I am using react-router-redux and would like to create a new custom NavLink or Link that preloads components for the hovered Link Route upon hover. I would be greatful for some help to point me into the right direction.
I have no idea how to accomplish mounting the component defined in the route without routing to it.
Basicly if I am at the root url of page and hover over a <Link to="/portfolio" /> I want the matched component defined in my routes to prefetch the data needed for this page so that when a user finally clicks the link the data would already be served.
I haven no issues creating a HOC to add eventlisteners to the Link's and then dispatch an action but I need help on how to mount the routes without actually routing to them.
react-loadable sounds like what you want.
https://www.npmjs.com/package/react-loadable
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.