麻煩在反應中呈現html

Question

我一直試圖在我的反應代碼中呈現html，但是每次我開始我的頁面並單擊'註冊'時，我都會看到'登錄'視圖。我的鏈接有問題嗎？

App.js

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 /> 
      <a href={'./signup.js'}>Sign up!</a> 

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

export default App; 

signup.js

class Signup extends Component { 
    render() { 
    return (
     <div className="Signup"> 
     <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; 

我不斷收到app.js而非signup.js認爲，任何建議將不勝感激。謝謝！

Answer 1

你可以試試下面的一些示例代碼。

// index.js 
'use strict'; 

const React = require('react'); 
const ReactDOM = require('react-dom'); 
const { BrowserRouter, Switch , Route } = require('react-router-dom'); 
const Signup = require('./components/Signup.jsx'); 
const App = require('./components/App.jsx'); 

ReactDOM.render((
    <BrowserRouter> 
    <Switch> 
     <Route exact path="/" component={App} /> 
     <Route path="/signup" component={Signup} /> 
    </Switch> 
    </BrowserRouter> 
), document.getElementById('root')); 


// App.jsx 

... 
constructor() { 
... 
this.handleSubmit = this.handleSubmit.bind(this); 
} 
... 
handleSubmit(event) { 
event.preventDefault(); 
this.props.history.push({ 
pathname: '/signup', 
state: { } 
}); 
} 
... 
<form onSubmit={this.handleSubmit}> 
... 
</form> 
.... 

Answer 2

這不工作的反應 <a href={'./signup.js'}>Sign up!</a>

你需要使用反應路由器-DOM。 請參閱：https://reacttraining.com/react-router/web/example/basic

Answer 3

這是react-router和<Link />組件的理想用例。下面是從他們的網站

import React from 'react' 
import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom' 

const BasicExample =() => (
    <Router> 
    <div> 
     <ul> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/topics">Topics</Link></li> 
     </ul> 

     <hr/> 

     <Route exact path="/" component={Home}/> 
     <Route path="/about" component={About}/> 
     <Route path="/topics" component={Topics}/> 
    </div> 
    </Router> 
) 

const Home =() => (
    <div> 
    <h2>Home</h2> 
    </div> 
) 

const About =() => (
    <div> 
    <h2>About</h2> 
    </div> 
) 

const Topics = ({ match }) => (
    <div> 
    <h2>Topics</h2> 
    <ul> 
     <li> 
     <Link to={`${match.url}/rendering`}> 
      Rendering with React 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/components`}> 
      Components 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/props-v-state`}> 
      Props v. State 
     </Link> 
     </li> 
    </ul> 

    <Route path={`${match.url}/:topicId`} component=  {Topic}/> 
    <Route exact path={match.url} render={() => (
     <h3>Please select a topic.</h3> 
    )}/> 
    </div> 
) 

const Topic = ({ match }) => (
    <div> 
    <h3>{match.params.topicId}</h3> 
    </div> 
) 

export default BasicExample 

https://reacttraining.com/react-router/web/example/basic