React Router 4 <Link> 标签更新 URL，但组件未呈现到页面答案

【问题标题】：React Router 4 <Link> tag updates URL but component is not being rendered to the pageReact Router 4 <Link> 标签更新 URL，但组件未呈现到页面
【发布时间】：2018-05-20 11:01:29
【问题描述】：

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

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;

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;

【问题讨论】：

我忘了从问题中删除它。我去掉了我必须使所有内容更短、更易于阅读的内联样式。我在控制台中没有收到任何错误，所以我知道它与我的内联样式无关。

标签： javascript reactjs routing react-router

【解决方案1】：

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

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

【讨论】：

据我所知，react-router 的行为符合预期。在 v4 中，他们移至 nested routes 的新模式，如果 url 匹配，则在当前视图中呈现路由。如果您希望更改整个“页面”，那么您希望在主路由器中使用该路由是有道理的。

【解决方案2】：

您应该在路由器中指定register 路径，例如<Route path="/register" component={YourComponent} />

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

【讨论】：