Question

我有以下组件......

import React from 'react';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'

class Bottom extends React.Component {

    constructor(){
        super();
        this.state = {link:"Don't have an account?"}
    }

    render(){

        return (
            <div>
            <div className="sub-login">
                <p>{this.state.link}<Link to="/register"> Register here</Link></p>
            </div>
            </div>

        );
    }
}

export default Bottom;

正如您所看到的，我有一个<Link>指向我希望用户点击的页面。

然后将此组件捆绑到另一个名为<Register />的类中。

然后我有以下路线...

class App extends React.Component {

    render(){

        return (
            <Router history={hashHistory}>
                <Route path='/' component={Index} >
                    <IndexRoute component={Register} />
                    <Route path='/register' component={Register} />
                </Route>
            </Router>
        );
    }
}

点击Link后，网址会更改为/register，但网页内容仍然是主页的内容，即<Index />组件。

为什么不显示<Register />组件？单击链接时，我必须更改以呈现寄存器组件？

Answer 1

我意识到我所要做的就是将{this.props.children}添加到我的索引布局中。因此，点击Link后，Register布局将加载到我的Index布局中。

以下代码使其有效......

 render(){

    return (
        <div>
        {this.props.children}  <-----
        <div className="sub-login">
            <p>{this.state.link}<Link to="/register"> Register here</Link></p>
        </div>
        </div>

    );

React Router-Link没有正确指挥

1 个答案: