To make this short, I am trying to render some routes wrapped in ErrorBoundaries inside the Router but it does not correctly match the path supplied.
Here is a quick sandbox example that I set up to show what I am talking about.
If you check out the sandbox, and click on the test link, you can see that nothing renders even though the ComponentWithoutErrors has a path match on /test.
Any help would be greatly appreciated.
https://codesandbox.io/s/still-fire-bfehr?fontsize=14&hidenavigation=1&theme=dark
This issue happens because ComponentWithoutErrors has a path of test and the ErrorBoundary surrounding it also has a path of test. So it matches test/test. We need to make the ComponentWithoutErrors component to have a path of /.
Here is the codesandbox
https://codesandbox.io/s/infallible-zhukovsky-evw2b
Related
In my react app with react-router v6 I am retrieving links dynamically that can be either a regular external url (like https://stackoverflow.com/) or an internal path (like "/my-page") that corresponds to a Route with react-router.
So far, when using react-router-dom's <Link> component, I could only get it to work with an internal path, but NOT with an external url. As far as I understood the docs I couldn't find a way to achieve this, at least not with v6.
So the best approach I've come up with so far is to write an own MyLink component that either render an <a> or a <Link> depending on whether the href is external or not:
function MyLink(props) {
const isHrefExternal = props.href.match(/^http|^https|^www/);
if (isHrefExternal) {
return <a href={props.href}>{props.children}</a>;
}
return <Link to={props.href}>{props.children}</Link>;
}
This of course doesn't look like a very good solution:
The check for isHrefExternal is very naive
It's unclear what props MyLink should accept and how they should be managed since <a> and <Link> have different props.
For a full example see this codesandbox
Can you tell me how to do it better? Ideally there would be an option to pass an external url to react-router-dom's <Link> component but I couldn't find one.
Thanks a lot!
The Link component handles only internal links within your app, and likely won't ever handle external links natively.
I don't see any overt issues with your code, and I don't think it's a bad solution. The "isExternal" check may be naive, but it only needs to cover your specific use cases. As new use cases are required you can tweak the logic for this check. In my projects I've worked with we've just typically included an isExternal type property with fetched data so the app doesn't even need to think about what is or isn't an external link, it just checks the flag when rendering.
My Video Footer is not showing up and i don't know anything wrong with it. Pls help me! Thank you so much! This is my codesandbox link: https://codesandbox.io/s/bold-parm-v8jv8?file=/src/Video.js
It seems you dont have anything in your VideoFooter component. You are importing a component that is not created, even in your app component you are not using Video component
??
React first renders App.js and that file needs to render all
You don't export any "videoFooter"
do not name component in camelCase, should be "VideoFooter" instead.
Component name is always start with capital letter.
See the React Doc for more info
you append your App to render at root. but inside App component you didn't include anywhere to your footer component.
See:
https://codesandbox.io/s/interesting-davinci-z1k8h?file=/src/App.js
I am experimenting with ReactTransitionGroup and ReactRouter. The problem is that exit transitions dont work.
according to RTG site: When using React Transition Group with React Router, make sure to avoid using the Switch component because it only executes the first matching Route. This would make the exit transition impossible to achieve because the exiting route will no longer match the current URL and the children function won't execute.
https://reactcommunity.org/react-transition-group/switch-transition
Is it possible to use SwitchTransition to fix this limitation by wrapping the CSSTransition (wrapping a switch) in a SwitchTransition?
Instead of defining the transition inside the Route, as suggested, you could define it on the link. By clicking on any link, the transition starts to the new route, and the current route exit.
It can be very trick to make, but there is a lib for that, react-tiger-transition.
Here is the demo from the documentation site:
(I'm the author).
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.
Using React with React-Router in a project and am wondering if it's possible to limit the possibilities for param names, like so:
www.mydomain.com/books/:id
and allowing 'Catcher in the Rye' and 'To Kill A Mockingbird' to be passed through, like so:
www.mydomain.com/books/catcher-in-the-rye
www.mydomain.com/books/to-kill-a-mocking-bird
I want to say that only a specific set of books can be used in place of :id (just so someone can't type in www.mydomain.com/books/whatever-they-want and have an empty React component render).
I do currently have a '*' route that catches anything not mentioned, but because params are dynamically generated based on whatever is passed, that won't help in this case.
Is this possible? Thanks.
You need to handle this logic in the component. Depending on if this is an already mounted component or not you will need to put the logic in the appropriate function (componentDidMount, componentWillReceiveProps)
if(!(this.props.params.id in myAcceptableParameters)){
redirect to a 404 here
}