Redirect from one page to another in react

Question

I am trying to move from one-page App.js to addWork.js. I added a button to redirect the user to addWork.js in App.js but the strange thing is that the page is redirecting to the same page(App.js interface) but the URL change to be addWork.

I used the following code in render():

<Router>
    <Route>
    <button type="button" id="Add-new-work" > <Link to='/addWork'>Add new work</Link></button>
    </Route>
   </Router>

Does this answer your question? [Programmatically navigate using React router](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) — That Guy Kev, Mar 07 '21 at 05:49

score 0 · Answer 1 · answered Mar 07 '21 at 05:51

0

You need to import and add the path in the index.js file. like follows:

    <Route>
      <Route component={AddWork} path='addWork' />   
    </Route>

You are not specifying the path, that's why it is redirecting to the same page

answered Mar 07 '21 at 05:51

theWanderer

576
2
10
30

I added to index.js and an error shows up saying that 'AddWork' is not defined no-undef – Heba Mar 07 '21 at 13:17
The code of index.js is as follow: ReactDOM.render( , document.getElementById('root') ); . I want to make sure that I am adding it in a right way. – Heba Mar 07 '21 at 13:28
Did you import it first in index.js page like this: import AddWork from '.your component path'?? – theWanderer Mar 07 '21 at 15:06
yes i did like this (import addWork from'./addWork';) they are on the same folder. I am using classes. – Heba Mar 07 '21 at 15:10
please check the spelling of the addWork component when exported. is it addWork or AddWork? – theWanderer Mar 07 '21 at 15:48
Class name is addWork. Do you know How can I run addWork directly without going through App.js? – Heba Mar 07 '21 at 15:53
can you share codesandbox version of your code? – theWanderer Mar 07 '21 at 15:55
I can't share code using comments because it is limited in characters. I am using "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", "@testing-library/user-event": "^12.7.0", "bootstrap": "^4.6.0", "react": "^17.0.1", "react-bootstrap": "^1.4.3", "react-dom": "^17.0.1", "react-router-dom": "^5.2.0", "react-scripts": "4.0.2", "solc": "^0.8.1", "uuid": "^8.3.2", "uuidv4": "^6.2.6", "web-vitals": "^1.1.0", "web3": "^1.3.4" – Heba Mar 07 '21 at 16:01

score 0 · Answer 2 · answered Mar 07 '21 at 06:08

0

In addition to specifying your Route components, don't forget to add exact to the / Route. If you didn't do that and your Home Route is on top of the others you will keep navigating to the Home page.

your code should be similar to this:

    <Router>
        <Route exact path="/">
            <button type="button" id="Add-new-work">
                <Link to='/addWork'>
                   Add new work
                </Link>
            </button>
        </Route>
        <Route path="/addWork">
            you are in the addWork Route!
        </Route>
   </Router>

answered Mar 07 '21 at 06:08

Fayez Nazzal

319
2
10

Thank you @fayez I tried to change the code to the code you shared with me but unfortunately, it is not redirecting to the addWork page. – Heba Mar 07 '21 at 13:10
The link changes to be /addWork and the button that redirects to addWork disappeared but the page content is the same as the home content. – Heba Mar 07 '21 at 13:27

Redirect from one page to another in react

2 Answers2