使用react-router，无法网页上渲染？在Apa.jsx，把userGet传给element_jpg_01，怎么实现？

Question

router02.js

import React from 'react'
// 使用 ES6 的转译器，如 babel
import { Router, Route, hashHistory } from 'react-router'

import About from '../component/About'
import Repos from '../component/Repos'

class Router02 extends React.Component {
    constructor() {
        super();
    }
    render() {
        return  <Router history={hashHistory}>
                    <Route path="/" component={App}/>
                        {/* add the routes here */}
                    <Route path="/repos" component={Repos}/>
                    <Route path="/about" component={About}/>
                </Router>;
    }


}

export default Router02;

Apa.jsx

const user = {
    firstName: '我123，',
    lastName: '起价的夫人'
};

const user_new = {
    firstName: '新的我，',
    lastName: '测试的文字'
};

const user_jpg = {
    avaUrl: fj1
}

// const element_jpg = <img src={user_jpg.avaUrl}></img>;

const element_jpg_01 = (
    <div>
        <div className="hello" style={{backgroundColor:'lime'}}>new——陌生的访客, {formatName(userGet)}!</div>
        <img src={user_jpg.avaUrl}></img>
    </div>
);


function getGreeting(userGet) {
    if (userGet) {
        return element_jpg_01;
    }
    return <div>Hello, 问一下</div>;
}

//const element = <img src={user.avatarUrl}></img>;
const element_return = (
    <h1>
        Hello, {formatName(user)}!
        {getGreeting(user_new)}
    </h1>
);



class Apa extends React.Component {


    render() {
        return (
            element_return
        );
    }
}
export default Apa;

项目的地址

地址

修改后的代码

import React from 'react';
import '../css/style.css';
import fj1 from '../img/fj1.jpg';

// => 是function的简写形式
/*
    function(x, y) {
        x++;
        y--;
        return x + y;
    }
    (x, y) => {x++; y--; return x+y}
 */

/*
function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}
*/

var formatName = (user) => {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: '我123，',
    lastName: '起价的夫人'
};

const user_new = {
    firstName: '新的我，',
    lastName: '测试的文字'
};

const user_jpg = {
    avaUrl: fj1
}

// const element_jpg = <img src={user_jpg.avaUrl}></img>;

const element_jpg_01 = userGet => (
    <div>
        <div className="hello" style={{backgroundColor:'lime'}}>new——陌生的访客, {formatName(userGet)}!</div>
        <img src={user_jpg.avaUrl}></img>
    </div>
);


function getGreeting(userGet) {
    if (userGet) {
        return element_jpg_01;
    }
    return <div>Hello, 问一下</div>;
}

//const element = <img src={user.avatarUrl}></img>;
const element_return = (
    <h1>
        Hello, {formatName(user)}!
        {getGreeting(user_new)}
    </h1>
);



class Apa extends React.Component {


    render() {
        return (
            element_return
        );
    }
}
export default Apa;

、

router02.js这里也报错，这个怎么改？

import React from 'react'
// 使用 ES6 的转译器，如 babel
import { Router, Route, hashHistory } from 'react-router'

import About from '../component/About'
import Repos from '../component/Repos'
import App from '../component/App'

class Router02 extends React.Component {
    constructor() {
        super();
    }
    render() {
        return  <Router history={hashHistory}>
                    <Route path="/" component={App}/>
                        {/* add the routes here */}
                    <Route path="/repos" component={Repos}/>
                    <Route path="/about" component={About}/>
                </Router>;
    }


}

export default Router02;

Answer 1

const element_jpg_01 = userGet => (
    <div>
        <div className="hello" style={{backgroundColor:'lime'}}>new——陌生的访客, {formatName(userGet)}!</div>
        <img src={user_jpg.avaUrl}></img>
    </div>
);

Answer 2

第二个你使用的是hashHistory，那么url就应该是类似 http://xxxx/xxx/#/xxx/xx的形式