反応のhtmlページが正しく表示されない

Question

私は反応を使って正しいHTMLページを表示しようとしています。しかし、何らかの理由で私のサインインページのナビゲーションボタンのリンクをクリックしたとき、私は正しいページに誘導されません、それは同じhtmlです。私はreact-router-domを使用していますが、まだサインアップページを表示しません。

は私のコードは

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 

はどんなアドバイス意志、どうもありがとう

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のように見えますありがとう！

Answer 1

ここでも、BrowserRouterを使用しています。それはトップレベルコンポーネントでなければならず、つまり、アプリ全体をラップして1回だけ使用する必要があります。だから、

アプリのコンポーネントはすべて、次に行う始まり主成分である場合：

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

そして、どこからでもBrowserRouterを削除します。

importとrequireを一緒に使うことができないと私が信じている（間違っているかもしれない）もう一つのこと。だから、

import Signup from './Signup';