Router issue in react js

Question

I am newbie in react. I am working on routing. I found that when I click on link, the URL change as per the link clicked, but it doesn't navigate to the next screen: https://jsfiddle.net/v78kncLb/

import {
    BrowserRouter as Router,
    Route,
    Link,
} from 'react-router-dom'
import Demo from "./demo";

<Router>
                <div className='input-form'>
                    <form>
                        <label>Name</label><br/>
                        <input type="text" name="username" onChange={this.onChange}
                               value={this.state.username}/><br/><br/>

                        <label>Password</label>
                        <input type="text" name="password" onChange={this.onChange}
                               value={this.state.password}/><br/><br/>

                        <label>Confirm Password</label>
                        <input type="text" name="confirm" onChange={this.onChange}
                               value={this.state.confirm}/><br/><br/>

                        <label>E-mail</label><br/>
                        <input type="text" name="email" onChange={this.onChange} value={this.state.email}/><br/><br/>

                        <label>Aadhar</label><br/>
                        <input type="text" name="aadhar" onChange={this.onChange} value={this.state.aadhar}/><br/><br/>

                        <label>Pan</label><br/>
                        <input type="text" name="pan" onChange={this.onChange} value={this.state.pan}/><br/><br/>

                        <label>Voter</label><br/>

                        <Link to='./demo' className="btn btn-primary">hello</Link>
                        <Route exact path="/"/>
                        <Route path="./demo" component={Demo}/>
                    </form>
                </div>
            </Router>

You can learn from working example: codesandbox.io/s/6p2p1zzn and codesandbox.io/s/vVoQVk78 — Oleg Levin
– Oleg Levin, Commented Sep 13, 2019 at 13:27
Have tried making sample its working absolutely fine but when i implemented in this its not working @Oleg — Dodiya rutu
– Dodiya rutu, Commented Sep 13, 2019 at 13:29

rijin · Accepted Answer · 2019-09-13 13:32:03Z

1

Problem is with you path. Update it by like below ( no dot before path)

<Link to='./demo' className="btn btn-primary">hello</Link>
<Route exact path="/"/>
<Route path="/demo" component={Demo}/>

answered Sep 13, 2019 at 13:32

rijin

1,76714 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

onuriltan · Accepted Answer · 2019-09-13 13:32:13Z

1

You need to put switch after Router like ;

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

const App = () => {
  return(
    <Router>
      <div className='app'>
        <Switch>
          <Route exact path="/"/>
          <Route path="/demo" component={Demo}/>
        </Switch>
      </div>
    </Router>
  )
}

edited Sep 13, 2019 at 13:32

answered Sep 13, 2019 at 13:29

onuriltan

3,9385 gold badges28 silver badges40 bronze badges

1 Comment

onuriltan Over a year ago

Also you need to delete . before /demo

Md Isfar Uddin · Accepted Answer · 2019-09-13 13:33:58Z

0

Remove the dot '.' from the Route path and Link. Just use this <Route path="/demo" component={Demo}/>

answered Sep 13, 2019 at 13:33

Md Isfar Uddin

73211 silver badges19 bronze badges

2 Comments

Dodiya rutu Over a year ago

thanks ..it worked for me but text is appending in the ./App file..what should i do for that?? Thanks a lot..@Md Isfar Uddin AINur

Md Isfar Uddin Over a year ago

Sorry did not understand. Could you explain it a little bit more?

Collectives™ on Stack Overflow

Router issue in react js

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related