Can anyone help me incorporate routing in my project? I am trying to route to a different page when a div is clicked but for some reason the div does not show up unless you put something in it(the text "Card") and also not how I styled it in my stylesheet.
The div is inside a component I did not fully finish making yet, but essentially when you click on this parent div it takes you to a different page.
The code in the main App component is this:
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import { Link } from 'react-router-dom'
import NAVBAR from './components/NAVBAR.js';
import CARD from './components/CARD.js'
import CONTENTS from './components/CONTENTS.js'
import './App.css'
import HOME_PAGE from './components/pages/HOME_PAGE.js';
function App() {
return (
<>
<body>
<header>
<NAVBAR />
</header>
<div className = "info-container">
<div className="cards-container">
<Link to = "/components/pages/HOME_PAGE.js"><CARD id = "pendulum"/></Link>
</div>
<CONTENTS />
</div>
<Router>
<Switch>
<Route exact path = "/components/pages/HOME_PAGE.js" component = {HOME_PAGE}/>
</Switch>
</Router>
</body>
</>
);
}
export default App;
The code of the div components(CARD) is this:
import React from 'react'
import './card.css'
import { Link } from 'react-router-dom'
export default function CARD({ id }) {
return (
<>
<div className = "card-container">
</div>
</>
)
}
I basically wrapped the div components(CARD) with a Link tag and pointed it towards the page I want it to render. But the div just does not appear(It does appear if put some text inside the Link tags but also not how I styled the div). The styles are simple but it might be a styling issue so here are the styles:
card.css:
.card-container{
height: 47.1%;
width: 100%;
background-image: linear-gradient(to right, #0c0624, #0c0625, #0b0726, #0b0727, #0a0828, #090d2b, #08112e, #071531, #071b36, #07213b, #082740, #0b2d45);
border-radius: 15px;
margin-bottom: 20px;
}
App.css:
*, *::before, *::after{
box-sizing: border-box;
}
body{
margin: 0;
overflow: none;
background-image: linear-gradient(to left top, #3e000b, #39030a, #330508, #2e0607, #290606, #270505, #260505, #240404, #250303, #260203, #260102, #270002);
}
.info-container{
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-self: center;
height: 90vh;
width: 100%;
padding: 12px;
position: relative;
overflow: hidden;
scroll-behavior: smooth;
}
.cards-container{
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 5px;
margin: 10px 0px 0px 0px;
border-radius: 15px;
overflow: scroll;
}
If i get you right, you can't wrap a div with a Link what you must know is that a react-router-dom Link component is just a regular html a tag. What you can essentially do to get this to work is to use the react-router-dom useHistory() hook and push or replace the history on your single page application. How you can do it?
In your Card component, which is the component yiu are trying to click and navigate you somewhere do this
import React from 'react'
import './card.css'
import { useHistory } from 'react-router-dom'
export default function CARD({ id }) {
const history = useHistory()
const navigate =() => history.push('/components/pages/HOME_PAGE.js' )
return (
<div className = "card-container" onClick={navigate} >
</div>
)
}
I hope you get the idea
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments