In my react component, PostItem, I've created a pointing to edit post page. All the works in my other components, except this one, and I could not find out why.
The page is successfully rendered with tag and proper href address, but I can't click the link. In fact, none of tags or link works on this component.
I have tried to create direct and link to any external site, but all links seem to be disabled on this component.
const PostItem = ({ id, title}) => (
<div className="list-item prfx-color" key={id}>
<div className="list-header">
<h3 className="list-title">{title}</h3>
<Link to={`/EditPost/${id}`}>
<i className="material-icons" style={{ color: 'white' }}>edit</i>
</Link>
</div>
</div >
)
I expect links to be clickable.
I found the reason why the or any not working. It has nothing to do with React-Router-Dom. It's my sass, where parent has a attribute of "position: absolute" and "z-index: -1".
When working with z-index and position, it would disable all links on the page. So, what I did was simple delete the position attribute.
Related
I wonder how to add event onMouseEnter on an react element that is located inside a link tag:
<a href="url">
<Container>
<div onMouseEnter={() => console.log('onMouseEnter on div')}>
...
</div>
</Container>
</a>
👆 doesn't work for me
I cannot change the structure of the code (put Container outside of the link) because I work on a extension that add some data on Instagram feed website, thus the a tag is from instagram.
I am following tutorials online for how to use react-scroll but I cant seem to get it working for me
I am using the Link tag from react-scroll and setting the 'to' attribute to the id of the div I want to scroll to. But when I view the live code the Link I have renders as text and appears to be unclickable.
import { Link } from "react-scroll";
const OpenBlurb = () => {
return (
<div className="blurb-container">
<h1>Welcome</h1>
<Link to="projects" smooth={true} duration={500} offset={50}> My Projects </Link>
</div>
);
};
export default OpenBlurb;
I want the 'My Projects' link to smooth scroll down the page to another component with the id 'projects'
const SecondSection = () => {
return (
<div className="second-container" id="projects" >
<h2>My Projects</h2>
</div>
);
};
export default SecondSection;
Can anyone see what I am doing wrong?
I am guessing "projects" are not identified as an ID.
Have you tried using to="#projects"?
Take a look at these, they might help:
How to scroll to an element?
react-scroll | How to scroll to a specific targeted component when clicking on Navbar Link
I'm using React router dom Link component. It is basically twitter's home feed. I want to be able to have two type of Links in one div component. One will be Link to go to user's profile and other one to go to post. I am currently getting warning and couldn't find solution for now. Here is the screenshot as reference:
I understand the issue here, my post Link is the parent element and I've added two user Link components inside of it as the user should be able to access post page when he clicks on anything inside of the post except user's profile photo and user's name. Is there any smarter way of achieving this and keeping links like this?
Code:
{posts?.map((post) => (
<Link
className={classes.link}
key={post.user.id}
to={`/posts/${post.id}`}
>
<div className={classes.post}>
<Link to={`/users/${post.user.id}`}>
<img
className={classes.profileImage}
src={DefaultLogo}
alt="default-profile"
/>
</Link>
<article className={classes.postDetails}>
<Link
className={classes.link}
to={`/users/${post.user.id}`}
>
<Typography
variant="subtitle1"
className={`${classes.postTitle} ${classes.content}`}
>
{post.user.name}
</Typography>
</Link>
<Typography
variant="subtitle1"
className={`${classes.postText} ${classes.content}`}
>
{post.body}
</Typography>
</article>
</div>
</Link>
))}
Yes, having anchor tags inside of another anchor tag is misleading a bad approach to doing things. But given your requirements you can make use of a basic button with react router dom history api.
A simple example:
import {Link, useHistory} from 'react-router-dom'
const App = () => {
const history = useHistory()
return (
<a
href='/user/1'
>
<h2>John doe</h2>
<div>here are some use information</div>
{/* Need to prevent the event bubbling */}
<Link role='link' to='/users/1/posts'>
User posts
</Link>
</div>
)
}
Is there a way to make the Fluent UI (formerly Office Fabric UI) Nav component correctly work replacing it's <a> element links with a custom link such as <Link> from Reach Router?
Fluent UI Nav provides an onRenderLink props but that only changes the inner content innermost <a> element. It leaves the outer wrapping element with a traditional <a> which causes full page re-renders when the user uses it.
It also provides the linkAs prop but that changes the entire content of the "Group Header" and takes a way all of the nice CSS styling advantages of using the Nav in the first place.
Is there a way to actually get this working?
I did a little more googling and found this codepen which uses LinkAs :
(props) => {
return <Link className={props.className} style={{color: 'inherit', boxSizing: 'border-box'}} to={props.href}>
<span style={{display: 'flex'}}>
{ !!props.iconProps && <Icon style={{margin: '0 4px'}} {...props.iconProps} /> }
{props.children}
</span>
</Link> ;
}
A little bit disappointing that you basically have to reverse engineer their CSS and render it yourself in order to get this working.
Right below the page you see a 'back to log' button. If someone clicks on that it will return to the left page. So in order to do so I thought using react router will do the job. But not sure how to fix that.Is there someone who can help me to point me to the right direction. Keep in mind that it will not open a new tab!
Link to working snippet to understand the bigger picture of my app. CodeSandBox snippet here
return (
<div>
{info.map((show: any) => {
console.log(show.show)
return (
<div key={show.show.id}>
<ReactMarkdown source={show.show.name}/>
{show.show.image && <img src={show.show.image.medium}/>}
{show.show.genres.map((showGenre: string, index: number) => {
return (
<div key={index}>
<ReactMarkdown source={showGenre}/>
</div>
)
})}
<div>
<Router>
<ul>
<li>
<Link to="/">See deta</Link>
</li>
</ul>
</Router>
</div>
</div>
)
})}
</div>
)
Check out this working example (I placed notes in each file):
https://codesandbox.io/s/modest-panini-hkzlv?file=/src/App.js
Overview:
there are several ways to do this
my suggestion is to use the history npm and create a history.js file
you will also need to use Router from react-router-dom
in your parent component, or in a Context provider, you can store your state
in the parent component, use react-router-dom Switch and Route to place routes
depending on implementation, conditionally render show route for async state update
in your search component, place all your Links using react-router-dom
on click Links should also update app's state of your specific selection
this selection gets passed to the show route/component
in the show component attach an on click that uses history.goBack and resets state
this might help you:
this.props.history.goBack();
it goes back to prev page