CODEWITHSUNDEEP
javascriptreactjs
Dodiya rutu
Dodiya rutu

Reputation: 83

Router issue in react js

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>

Upvotes: 1

Views: 82

Answers (3)

Md Isfar Uddin
Md Isfar Uddin

Reputation: 732

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

Upvotes: 0

onuriltan
onuriltan

Reputation: 3898

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>
  )
}

Upvotes: 1

rijin
rijin

Reputation: 1759

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}/>

Upvotes: 1

Related Questions