javascript - Cannot read property 'props' of undefined - React Router - Stack Overflow

admin管理员组

文章数量:1023758

I'm trying to do nested routing using react server. But I'm getting an error in the browser console stating

Uncaught TypeError: Cannot read property 'props' of undefined

Here is the react code

    const App = () => {
    return (
        <div>
            <h2>{'Nested Routing App'}</h2>
             <ul>
                <li>
                    <Link to="/view1">{'View1'}</Link>
                </li>
            </ul>
            {this.props.children}
        </div>
    );
};

const View1 = () => {
    return(
        <h3>{'Wele to View1'}</h3>
    );
};


render(
    <Router>
        <Route ponent={App} path="/">
            <Route ponent={View1} path="/view1"></Route>
        </Route>
    </Router>,
document.getElementById('app'));

Any idea what might be wrong ?

I'm trying to do nested routing using react server. But I'm getting an error in the browser console stating

Uncaught TypeError: Cannot read property 'props' of undefined

Here is the react code

    const App = () => {
    return (
        <div>
            <h2>{'Nested Routing App'}</h2>
             <ul>
                <li>
                    <Link to="/view1">{'View1'}</Link>
                </li>
            </ul>
            {this.props.children}
        </div>
    );
};

const View1 = () => {
    return(
        <h3>{'Wele to View1'}</h3>
    );
};


render(
    <Router>
        <Route ponent={App} path="/">
            <Route ponent={View1} path="/view1"></Route>
        </Route>
    </Router>,
document.getElementById('app'));

Any idea what might be wrong ?

• javascript
• reactjs
• react-router

Share Improve this question Follow asked Jan 7, 2017 at 14:26 iJadeiJade 23.9k5858 gold badges161161 silver badges250250 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

arrow functions do not have lexical this. And functional ponents receive props as a function argument. So the right way to do this would be..

const App = (props) => {
    return (
        <div>
            <h2>{'Nested Routing App'}</h2>
             <ul>
                <li>
                    <Link to="/view1">{'View1'}</Link>
                </li>
            </ul>
            {props.children}
        </div>
    );
};

read more here https://facebook.github.io/react/docs/ponents-and-props.html

I'm trying to do nested routing using react server. But I'm getting an error in the browser console stating

Uncaught TypeError: Cannot read property 'props' of undefined

Here is the react code

    const App = () => {
    return (
        <div>
            <h2>{'Nested Routing App'}</h2>
             <ul>
                <li>
                    <Link to="/view1">{'View1'}</Link>
                </li>
            </ul>
            {this.props.children}
        </div>
    );
};

const View1 = () => {
    return(
        <h3>{'Wele to View1'}</h3>
    );
};


render(
    <Router>
        <Route ponent={App} path="/">
            <Route ponent={View1} path="/view1"></Route>
        </Route>
    </Router>,
document.getElementById('app'));

Any idea what might be wrong ?

I'm trying to do nested routing using react server. But I'm getting an error in the browser console stating

Uncaught TypeError: Cannot read property 'props' of undefined

Here is the react code

    const App = () => {
    return (
        <div>
            <h2>{'Nested Routing App'}</h2>
             <ul>
                <li>
                    <Link to="/view1">{'View1'}</Link>
                </li>
            </ul>
            {this.props.children}
        </div>
    );
};

const View1 = () => {
    return(
        <h3>{'Wele to View1'}</h3>
    );
};


render(
    <Router>
        <Route ponent={App} path="/">
            <Route ponent={View1} path="/view1"></Route>
        </Route>
    </Router>,
document.getElementById('app'));

Any idea what might be wrong ?

• javascript
• reactjs
• react-router

Share Improve this question Follow asked Jan 7, 2017 at 14:26 iJadeiJade 23.9k5858 gold badges161161 silver badges250250 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

arrow functions do not have lexical this. And functional ponents receive props as a function argument. So the right way to do this would be..

const App = (props) => {
    return (
        <div>
            <h2>{'Nested Routing App'}</h2>
             <ul>
                <li>
                    <Link to="/view1">{'View1'}</Link>
                </li>
            </ul>
            {props.children}
        </div>
    );
};

read more here https://facebook.github.io/react/docs/ponents-and-props.html

本文标签： javascriptCannot read property 39props39 of undefinedReact RouterStack Overflow