How to route to a file in a folder with React Router?

Question

My React app has a folder structure like this:

- src -- pages --- Home.js --- Contact.js --- project1 ---- About.js

With React Router I can navigate to Home.js and Contact.js easily like this:

<Router> <Switch> <Route path='/'> <Home /> </Route> <Route path='/contact-me'> <Contact /> </Route> </Switch> </Router>

And click this to go to a page:

<Link to='/'>Home</Link> <Link to='/contact-me'>Contact me</Link>

Now I would like to navigate to About.js inside project1 folder, how can I do it with React Router?

Ayabonga Qwabi · Accepted Answer · 2020-10-14 14:03:19Z

You can import the about page like you've imported the others

import About from '../pages/project1/About' <Router> <Switch> <Route path='/'> <Home /> </Route> <Route path='/contact-me'> <Contact /> </Route> <Route path='/about-us'> <About /> </Route> </Switch> </Router>

Dipankar Maikap · Accepted Answer · 2020-10-14 14:07:13Z

You have to do it like its done for Home and contact component first import the component and then create your route.

import About from "./project1/About.js" <Router> <Switch> <Route path='/'> <Home /> </Route> <Route path='/contact-me'> <Contact /> </Route> <Route path='/about-me'> <About /> </Route> </Switch> </Router>

Collectives™ on Stack Overflow

How to route to a file in a folder with React Router?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related