javascript - 在 React 中渲染正确的 html 页面时出现问题

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

路由.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。它应该是顶级组件，这意味着它应该包装您的整个应用程序并且仅使用一次。

因此，如果您的应用程序组件是一切开始的主要组件，那么请执行以下操作:

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

并从其他地方删除 BrowserRouter。

我相信的另一件事(可能是错误的)您不能同时使用 import 和 require 。所以改变一下

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

到

import Signup from './Signup';