How to Link to another page using React Router

JavaScript
1

I attached my repo if anyone can help me with my issue.

I am trying to be able to go from line 32 on the Projects.jsx page to another page using a path called ‘/landscape’, but I haven’t had any luck.

Is anyone familiar with react router that might be able to clone my project and check it out?

2 
{/* <BrowserRouter> */}
      <App />
    {/* </BrowserRouter> */}
  • uncomment this

and then in App.js file dine “routes” and its corresponding component for them, for reference check out this section from react router docs Main Concepts v6.11.1 | React Router

and then you can use these
{/* <Link to='/landscape'><button className={styles.projectButtons}>View / Buy</button></Link> */}

for more reference checkout “react router docs” more thoroughly

hope this was useful, happy coding :slight_smile:

3

Ok, I have done what you mentioned, but the documentation is similar to what I was doing before.

If you look at my latest push, does it seem correct?

  • I uncommented everything from index.js
  • then uncommeneted out in projects.jsx
  • and then added in route with the path element of “/landscape” with the component attached to the element
4

Ok, I have gotten further. The new page that I want to go to renders, but it renders at bottom of home page instead of bringing me to new page.

the render is from Landscape component with an h1 that says ‘hello’

Not sure why this is

( I pushed up new code)

5

Move the route to index.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<App />} />
    <Route path="/landscape" element={<Landscape />} />
  </Routes>
</BrowserRouter>

https://github.com/remix-run/react-router/blob/dev/examples/basic/src/App.tsx

I would suggest you read the docs thoroughly and do the tutorial example they have. There are also plenty of articles and tutorials on the web just make sure it is for version 6 and not 5. If that is the version you are using, you do not have it in your dependencies which you should.

6

Thank you!

I think I have it in my dependencies… react-router-dom “6.11.1”. I just installed react router the other day so it should be the most updated. I also used npm install react-router-dom@latest to make sure. nothing changed.

7

Now you do, you didn’t in the initial commit.

https://github.com/DeBoer753/m-photography-PROJECT/commit/e7bc0b5a1262aa8d278c44de420192a3fdb34a60

Dependencies should always be pushed so maybe you just didn’t push the change to the package.json file.

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.