Question

不能为我的生活得到一个简单的反应路由器工作！它显示第一页，但是当我点击链接时它没有做任何事情，只是将网址更改为/ home。它一直显示“应用程序”。为什么主页组件没有加载???

简单代码：

import React from 'react';
import { Link } from 'react-router'
import { render } from 'react-dom'
import { Router, Route } from 'react-router'    

class App extends React.Component {
    render() {
        return (
            <div><Link to="/home">app</Link></div>
        );
    }
}    

class Home extends React.Component {
  render() {
    return (
      <div>Honey, I'm home!!!</div>
    );
  }
}    

render(
    <Router>
        <Route path="/" component={App}>
            <Route path="home" component={Home}/>
        </Route>
    </Router>,
    document.getElementById('tempoot')  
)

Answer 1

因为您没有告诉它在任何地方呈现Home。你需要做类似的事情（你缺少的核心事物是{this.props.children}）：

import React from 'react';
import { Link } from 'react-router'
import { render } from 'react-dom'
import { Router, Route } from 'react-router'    

class App extends React.Component {
    render() {
        return (
          <div>
            <div className="nav">
                <Link to="/home">app</Link>
            </div>
            <div className="content">
                // THIS IS THE CORE LINE YOU ARE MISSING
                {this.props.children || "No one is home :("}
            </div>
          </div>
        );
    }
}    

class Home extends React.Component {
  render() {
    return (
      <div>Honey, I'm home!!!</div>
    );
  }
}    

render(
    <Router>
        <Route path="/" component={App}>
            <Route path="home" component={Home}/>
        </Route>
    </Router>,
    document.getElementById('tempoot')  
)

简单的React路由器不工作

1 个答案: