无法在React中呈现正确的HTML页面

Question

I have been trying to render the correct HTML page using react. However, for some reason when I click the navigation button link in my signin page, I do not get directed to the right page, it is the same html. I am using react-router-dom' but it still does not render my sign up page.

My code looks like

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

Thank you so much, any advice will be appreciated!

Answer 1

One thing is that you use BrowserRouter here and there. It should be top-level-component, meaning it should wrap your whole app and used only once.

So if your App component is the main component where everything starts then do:

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

And remove BrowserRouter from anywhere else.

Another thing I believe (could be wrong) that you cannot use import and require together. So change

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

to

import Signup from './Signup';