Question

我是新手。我正在路由。我发现，当我单击链接时，URL会根据所单击的链接进行更改，但不会导航到下一个屏幕：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>

Answer 1

您需要像Router一样在Router之后放置开关。

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

Answer 2

问题与您同在。如下更新（路径前没有点）

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

Answer 3

删除点“。”从路径路径和链接。只是用这个 <Route path="/demo" component={Demo}/>

React JS中的路由器问题

3 个答案: