无法在React中渲染HTML

Question

I've been trying to render html in my react code, however each time I start my page and click 'signup' I get the 'login' view. Is there something wrong with my linking?

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;

I keep getting the view of app.js rather than signup.js, any advice will be greatly appreciated. Thank you!

Answer 1

This does not working in react <a href={'./signup.js'}>Sign up!</a>

you need to use react-router-dom. Refer this: https://reacttraining.com/react-router/web/example/basic

Answer 2

This is a perfect use case for react-router and the <Link /> component. Here is some example code from their website

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

Answer 3

You can try the following.

// 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>
....