Here’s my App.js
import Heading from './Components.js/Heading.js'
import './App.css'
function App () {
return (
<div>
<Heading />
</div>
);
}
export default App
Here’s the index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Routes, Route} from "react-router-dom"
import Payment from './Components.js/Payment.js'
import Trolley from './Components.js/Trolley.js'
import './index.css'
import App from './App.js'`
`const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
<Routes>
<Route exact path="/" component={<App />} />
<Route exact path="/Component.js/Trolley.js" component={Trolley} />
<Route exact path="/Component.js/Checkout.js" component={Payment}/>
</Routes>
</BrowserRouter>
</React.StrictMode>
)
Here’s the Heading component
import React from 'react'
import {React Icon} from 'react-icons/'
import {Link} from "react-router-dom"
function Heading () {
let pagetitle = "Page Title"
return (
<nav >
<div >
<Link to="/App" ></Link>
<Link to="/App" ><h1>{pagetitle}</h1></Link>
</div>
<div >
<Link to="/Trolley" >React Icon</Link>
</div>
</nav>
)
}
export default Heading
Here’s the component I’m trying to display
import {Link} from "react-router-dom"
function Trolley () {
let pagetitle = "Page Title"
return (
<div>
<div >
<nav >
<div >
<h1>{pagetitle}</h1></div>
</nav>
<div >
<button>
Shop More
</button>
<div >
<Link to="./Payment.js" >Pay Now</Link>
</div>
</div>
</div>
</div>
)
}
export default Trolley`
I tried using routes. I expected the Trolley component to be displayed when I click on the icon. However, the display didn’t change. App continued to be rendered, the trolley component was not displayed.
New contributor
O_thie is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Edit: I think its a typo, /Component.js/Checkout.js needs to be /Component.js/Payment.js
I would assume you have to change your routes from:
<Route exact path="/" component={<App />} />
<Route exact path="/Component.js/Trolley.js" component={Trolley} />
<Route exact path="/Component.js/Checkout.js" component={Payment}/>
to:
<Route exact path="/" component={<App />} />
<Route exact path="/Component.js/Trolley.js" component={<Trolley />} />
<Route exact path="/Component.js/Checkout.js" component={<Payment />}/>
If this still doesnt work, you might have to change the paths of the components so it would look like this:
import Trolley from './Trolley';
import Payment from './Payment';
...
<Route path="/" element={<App />} />
<Route path="/trolley" element={<Trolley />} />
<Route path="/checkout" element={<Payment />} />
I think this should fix your issue