Question

我一直在尝试使用react呈现正确的HTML页面。但是，出于某些原因，当我点击登录页面中的导航按钮链接时，我没有被定向到正确的页面，它是相同的html。我正在使用react-router-dom'，但它仍然无法呈现我的注册页面。

我的代码看起来像

App.js

import React, { Component } from 'react';
import cupcake from './images/cupcake.png';
import './App.css';
import {BasicExample} from './route.js'
import { Link } from 'react-router-dom'
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom'

class App extends Component {
  render() {
    return (
      <div className="App">
         <div className = "loginBox">
      <div className = "glass">
        <img src= {cupcake} className = "user" />
        <h3>Sign in Here</h3>
        <form>
            <div className = "inputBox">
              <input type="text" name="" placeholder="Username" />
              <span><i className="fa fa-user" aria-hidden="true"></i></span>
            </div>
            <div className = "inputBox">
              <input type="password" name="" placeholder="Password" />
              <span><i className="fa fa-lock" aria-hidden="true"></i></span>
            </div>
              <input type="submit" name="" value="Login" />
        </form>

            <a href= "#">Forgot Passwordk?</a>
            <br />
            <Router>
               <Link to="/Signup">Signup??</Link>
            </Router>
      </div>
    </div>
      </div>
    );
  }
}

export default App;

Signup.js

import React, { Component } from 'react';
import cupcake from './images/cupcake.png'
import './App.css';


export class Signup extends Component {
  render() {
    return (
      <div className="ignup">
         <div className = "loginBox">
      <div className = "glass">
        <img src= { cupcake} className = "user" />
        <h3>Signup Here!</h3>
        <form>
            <div className = "inputBox">
              <input type="text" name="" placeholder="Username" />
              <span><i className="fa fa-user" aria-hidden="true"></i></span>
            </div>
            <div className = "inputBox">
              <input type="password" name="" placeholder="Password" />
              <span><i className="fa fa-lock" aria-hidden="true"></i></span>
            </div>
              <input type="submit" name="" value="Login" />
        </form>
        <a href="#">Login!</a>

      </div>
    </div>
      </div>
    );
  }
}

export default Signup

route.js

import React from 'react';

import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
const Signup = require('./Signup.js');
const BasicExample = () => (
  <Router>
    <div>

      <Route path="/Signup" component={Signup}/>
    </div>
  </Router>
)


export default BasicExample

非常感谢，任何建议都将不胜感激！

Answer 1

有一点是你在这里和那里使用BrowserRouter。它应该是顶级组件，这意味着它应该包装整个应用程序并且只使用一次。

因此，如果您的App组件是所有内容开始的主要组件，请执行以下操作：

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
         ...
         ...
        </div>
      </Router>
    );
  }
}

从其他任何地方删除BrowserRouter。

我认为（可能是错误的）另一件事是你不能同时使用import和require。所以改变

const Signup = require('./Signup.js');

到

import Signup from './Signup';

无法在反应

1 个答案: