Question

我正在尝试为我的反应应用设置登录功能。一旦用户登陆登录页面，它底部有一个按钮，上面写着“注册”。当我点击该链接时，它会正确更新URL并在URL中显示“/ register”但注册组件不会呈现。在更传统的路由中，我会设置一个路由配置来决定所有路由的去向，但根据我的理解，路由器4正在远离它。从阅读文档和一些例子，我想简单地说路径路径=“/ register”组件= {注册} 足以告诉Link标记要渲染的组件，但似乎并非如此。我正在使用“react-router”：“^ 4.2.0”

Login.js

import React from 'react';
import LoginForm from '../components/LoginForm';

const Login = () => (
  <div>
    <LoginForm></LoginForm>
  </div>
);

export default Login;

LoginForm.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import { Link, Route } from 'react-router-dom';
import Register from "../pages/Register";

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: ''
    }
  }

  onSubmit(e) {
    e.preventDefault();

    this.setState({
      error: 'Something went wrong.'
    })
  }

  render() {
    return (
      <form>
        { this.state.error ? <p>{this.state.error}</p> : undefined }
        <TextField type="email" name="email" hintText="Email" fullWidth={true} />
        <TextField type="password" name="password" hintText="Password" fullWidth={true} />
        <RaisedButton label="Login" primary={true} style={buttonStyles} onClick={this.onSubmit.bind(this)} />
        <p style={text}>No account?<Link to="/register"> Sign up</Link></p>

        <Route path="/register" component={Register}></Route>
      </form>
    )
  }
}

export default LoginForm;

Register.js

import React from 'react';
import RegisterForm from '../components/RegisterForm';

const Register = () => (
    <div>
        <RegisterForm></RegisterForm>
    </div>
);

export default Register;

RegisterForm.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import { Link } from 'react-router-dom';

class RegisterForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: ''
        }
    }

    onSubmit(e) {
        e.preventDefault();

        this.setState({
            error: 'Something went wrong.'
        })
    }

    render() {
        return (
            <form>
                { this.state.error ? <p>{this.state.error}</p> : undefined }
                <TextField type="name" name="name" hintText="Name" fullWidth={true} />
                <TextField type="email" name="email" hintText="Email" fullWidth={true} />
                <TextField type="password" name="password" hintText="Password" fullWidth={true} />
                <RaisedButton label="Register" primary={true} onClick={this.onSubmit.bind(this)} />
            </form>
        )
    }
}

export default RegisterForm;

Answer 1

您应在路由器中指定register路径，如<Route path="/register" component={YourComponent} /＆gt;

<Switch>
   <Route exact path="/" component={Root} />
   <Route path="/register" component={Register} />
</Switch>

Answer 2

原来路由标记需要在我的主导航组件内部，而不是在LoginForm.js组件内部。我没有将它包含在我的主导航中，因为你无法从主导航到达注册页面，为什么需要在那里声明？我想我需要通过将它添加到我的LoginForm.js组件来动态创建它。

<Route path="/register" component={Register} />

React Router 4 <link />标记更新URL但组件未呈现到页面

2 个答案: