無法在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

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使用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';