Hi I want to code a dynamic href basing on team member names using react material ui drawer. This is a part of the code:
const sideList = (
<List>
{['MemberA', 'MemberB', 'MemberC'].map((text, index) => (
<a href={text}>
<ListItem button>{text}</ListItem>
</a>
))}
</List>
);
When I'm on the home page, it works: clicking on MemberA (on Drawer list), I'm redirected to homepage.com/MemberA.
But when I'm on MemberA page and I click on MemberB (on Drawer list), I'm redirected to homepage.com/MemberA/MemberB, that doesn't exist.
How can I solve this problem?
try a leading slash:
href={`/${text}`}
Related
I'm currently trying to implement a website using Material-UI's drawer component. It works, when I click on the Drawer Items, it routes me to the correct pages.
But how do I get the individual Drawer Items to highlight the current page it is on.
For instance, if I am on /dashboard page, and if the Drawer Item for Dashboard page should be highlighted (different color and styles) to indicate that I am currently on that page dynamically.
Haven't manage to find any good solutions online and the Material-UI docs doesn't have a demo of how this is possible, great to hear how you all do it.
You can highlight the current ListItem in the Drawer by setting selected props to true and use the pathname information to determine if the item matches the current route:
const routes = {
Home: "/",
About: "/about",
Users: "/users"
};
const { pathname } = useLocation();
<List>
{Object.keys(routes).map((routeName, index) => {
const route = routes[routeName];
return (
<ListItem selected={route === pathname} button key={route}>
<ListItemText primary={routeName} />
</ListItem>
);
})}
</List>
Live Demo
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>
)
}
I am using the Material UI Dialog and react-router to create a sign-in option. Inside the sign-in dialog there is a sign-up link that is supposed to redirect the user to the sign-up page and close the dialog at the same time.
The code for the sign up link looks like this:
render() {
return (
<Link
class="underline text-green-600 mx-1 cursor-pointer"
to="/signup"
onClick={this.props.handleClose}
>
Sign Up
</Link>
);
}
Right now, when the Signup link is clicked the dialog closes without changing the page address. If the onClick command is removed the page address changes but the dialog is not closed. Is there a way to both close the dialog and redirect the page at the same time? Thank you
You can provide a function to react-router Link to prop:
to: function
A function to which current location is passed as an argument and which should return location representation as a string or as an object
So one possible solution is:
<Link
class="underline text-green-600 mx-1 cursor-pointer"
to={() => {
const href = '/signup';
this.props.handleClose();
return href;
}}
>
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.
I have an app using a material ui List with ListItems.
I want for users to be able to click on a ListItem and have it open a Modal or a Collapse to give more info about the ListItem. I want the view to stay the same (overall), albeit with a new url that links to that Modal or Collapse.
Right now, all I can get is that the user clicks on the ListItem and it opens an entirely new view.
I want to have the ListDetails or ListItem details be shown in a collapse or modal (or some ui that is on that same page) and be linkable (have a url)
Code:
// List
<List>
<Collapse>
<ListItem <Link to={`/listitem/${listitem.id}`}> />
<ListDetail />
</Collapse>
<ListItem />
<Modal><ListDetail /></Modal>
</List>
// Router
<Route path="/list/:id" render={({ match }) => <ListDetail params={match.params} />} />
This goes to an entirely new page. How to wire it up to so that I can show ListDetail within the same page?
How to set up the components/routing to change urls but just change the UI (and not render an entirely new page?
Do not put <Link to={'/listitem/${listitem.id}'}> there. Instead put an on-click handler with on-click function as this.props.router.push('/bar'). This will cause the route to change.
And when modal is false you can revert the url to previous url using the same method.