Develop Reference

React router url changes correctly but component not being rendered from button component link

I have something similar to the following CodeSandBox example where I need to use react routing within two different components.
The problem that I am facing is that, if using this codesandbox example and I click down to either the Profile or Quotes component level and assuming I have the following Material-UI button within each of these bottom components:
<Button>
text="New Item"
variant="outlined"
className={classes.newButton}
component={NewItem}
to={'/new-item'}
</Button>
When clicking on this "New Item" button, the URL changes to the correct route, i.e. /new-item but the actual NewItem component is not being rendered in the page?
If I refresh the browser, then it loads correctly.
Can anyone pls assist with the above and what the best solution is, when at this level?

Arthur, make sure in your index.js or wherever you are declaring your switch its set up like so.
<Switch>
<Route exact path="/NewItem" component={NewItem}/>
</Switch>
Then you can simply add a nav link like so
<Link to="/NewItem">New Item</Link>

the button will have a component of Link which is imported from react-router-dom
<Button>
text="New Item"
variant="outlined"
className={classes.newButton}
component={Link}
to="/new-item"
</Button>
and in the app.js you will create a Route like so :
<Switch>
<Route exact path="/NewItem" component={NewItem}/>
</Switch>

Well you shouldn't use button for changing go to new Page or going new URL. rather than use
<link to=""/> for routing but if you want to use button for going to different page than use Redirect from react-router-dom
import { Redirect } from 'react-router-dom';
const Next = (e) => {
e.preventDefault();
return <Redirect to='/NewItem' />;
};
<Button onClick={Next}>
text="New Item" variant="outlined" className={classes.newButton}
component={NewItem}
</Button>;
Or you can use Link using Link
import {Link} from 'react-router-dom';
<Link to={'/NewItem'} className={classes.newButton}>
New Item
</Link>;

Next/router nothing happens when browser’s back button click

I don't understand why, when I click on browser’s back button my page doesn't reload.
I have a catalog component inside /pages/index.js which is my home page, a dynamic route to navigate to the products /pages/books/[name].js
This is the Link I use to go to the products pages :
<div className="container-cat">
{products.map((_product) => (
<Card id="lien" key={_product.id} alt="book" className="catalogue">
<Link href='/books/[name]' as={`/books/${_product.name}`}>
<a>
<Card.Body>
<Card.Img variant="top" src={getStrapiMedia(_product.grid_pic.url)} width="200px" />
<Card.Title>{_product.name}<br />{_product.author}<br />{_product.price} €</Card.Title>
</Card.Body>
</a>
</Link>
</Card>
))
}
</div>
I don't know what else to put here ...

I change my routes, putting the catalog component as the index.js of the /pages/books/
I can't really explain why, but it works

Material-UI - How to render something on top of the AppBar?

I'm developing a React web app using the Material-UI framework. I've now come to a point where I want to render something on top of the AppBar, but from a different file.
My app is structured like this:
Main.js - contains the AppBar and react-router
Various views or "pages" which are loaded by react-router as children of Main.js
Various components that are rendered by these pages.
You can see what I'm trying to achieve below.
If it helps, here is the code for the AppBar, note; I have also tried with "static" position.
<AppBar position="fixed">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
onClick={handleClick}>
<MenuIcon/>
</IconButton>
<Typography variant="h4" className={classes.title}>
<Link href="/" variant="h4" color="inherit">Site Name</Link>
</Typography>
</Toolbar>
<div>
<Menu
id="Menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}>
<MenuItem onClick={handleClose}>
// SOME MENU ITEM
</MenuItem>
</Menu>
</div>
</AppBar>
And the page where I am trying to render the widget. For now I am just using a Typography component as a placeholder. My understanding is that I need to set the Z index of the div that this widget is wrapped in to elevate it, however, I assume that it is only relative to other components within this view, and not also the AppBar as that is coming from elsewhere?
<div>
<div
style={{
height: 20,
backgroundColor: "yellow",
position: "relative",
zIndex: 10
}}>
<Typography component="h3" variant="h3">Widget Placeholder</Typography>
</div>
<Toolbar></Toolbar> // Empty toolbar is used to push all the other content down below the AppBar when it's position is set to fixed
// other content from this page
</div>
Code sandbox: https://codesandbox.io/s/goofy-feather-cf1kd?file=/src/App.js
Thanks :)

How to redirect on different URL on image click in reactjs?

I am trying to redirect to the specified URL when clicked on image.
It is appending localhost by default at the beginning of the URL and thus considering URL as the sub domain of localhost and its unreachable
Approach 1:
<a rel="noopener noreferrer" href={rowData.preview} target="_blank">
<Image
className="preview-content"
src={webAttachment}
/>
</a>
Approach 2:
<Link to={rowData.preview}>
<Image
className="preview-content"
src={webAttachment}
/>
</Link>
{rowData.preview} includes url of any website.
Not getting reliable solution in any of the approach.

Try these lines of code.
import { Link } from "react-router-dom";
<Link to="https://www.google.com/">
<Image src="abc.jpg" className="imageLink" />
</Link>

onClick={()=> window.open("someLink", "_blank")}
Visit the stackoverflow link.
Maintaining href "open in new tab" with an onClick handler in React

href="google.com" will lead to "your-current-full-url/google.com".
href="/google.com" will lead to "your-domain/google.com".
href="https://google.com" will lead to "google.com".
Not just in react. even in normal html it works the same way. so make sure the external URL you are passing in rowData.preview has http://

<a target="_blank" href="https://www.linkedin.com/">
<img
src={b4}
alt="Linkedin"
className="mw3-ns"
style={{height: "50px", width: "50px", cursor: "pointer"}}
/>
</a>
This worked for me. though I got a warning for using target="_blank"

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>

I'm trying to use react-router with reactstrap with create-react-app.
In the routing page, I needed to use state for the reactstrap, so I converted the router from a variable to a class, but I get this warning:
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
I don't know what to do. I needed to style the router navigation using reactstrap, so I did this:
<NavLink
componentClass={Link}
href="/contact"
to="/contact"
active={location.pathname === '/contact'}
>
anywords
</NavLink>
<Navbar dark id="RouterNavbar" expand="md">
<NavbarBrand id="NavBrand"href="#x">
<ul>
{/* a bunch of <li></li> */}
</ul>
</NavbarBrand>
<NavbarToggler id="NavBarToggler" onClick={this.toggle1.bind(this)} />
<Collapse isOpen={this.state.isOpen1} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>
</NavItem>
{/* just more of the above */}
Other than a couple of <li> coming close to each other at random times, hot reloading not working sometimes, and the warning message I get in the console, nothing bad happens, but when I read about this issue, I found out that I shouldn't do this.

This is the code which causing the error,
<NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>
Which is converted to,
<a><a></a></a>
So you are getting error,
Warning: validateDOMNesting(…): <a> cannot appear as a descendant of <a>
To solve this just use one of the follow,
<NavLink id="RouterNavLink" style={None} to="/contact">anywords</NavLink>
OR,
<Link id="RouterNavLink" style={None} to="/contact">anywords</Link>

Add the as prop (formerly componentClass) to your original NavLink to keep the styling while also silencing the warning.
See react-bootstrap#nav-link-props docs
Or View Screenshot
Original:
<NavLink href="#x">
<Link id="RouterNavLink" style={None} to="/contact">anywords</Link>
</NavLink>
New:
<Nav.Link as={Link} to="/contact">anywords</Nav.Link>

I would like to suggest an alternate solution which not only solve your problem but give you desired result. In any case someone else stumbled on this post like I did.
Use Link jsx element offered by react router dom but add className="nav-link" to it. This will give you styling of the NavLink jsx which react strap is using.
So, it should look like this,
<Link className="nav-link" id="RouterNavLink" style={None} to="/contact">anywords</Link>

you can try this in order to avoid the error
<NavItem as="li"> <Link>.....

I had same problem. It is because we can not use link, or a tag inside another like...
<a><a></a></a>
I wanted to apply className to my a tag in navigation bar. so i applied className to a tag in component and import that component in navigation bar component
<a className="nav-link" onClick={() => loginWithRedirect()}>
Login
</a>
This is how i use this link in navigation template,without any classname
<LoginButton />