javascript - React Component not rendered - Stack Overflow

admin管理员组

文章数量:1405161

I have an issue with my "Home" react ponent.

I am using react-router, and have a route file that contains the following:

 <Router history={ browserHistory }>
      <Route path="/" ponent={ App }>
        <IndexRoute ponent={ Home } />
      </Route>
    </Router>

Now, my Home ponent works when defined like this:

export const Home = () => <h3>Index</h3>;

But if I defined it like this:

class Home extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h3>InDex2</h3>
    );
  }
}

export default Home;

Then it is not working. Nothing gets rendered in the second case, while in the first case I can see 'Index'...

Do you have an idea why this is not working?

My App ponent is as simple as this:

export const App = ( { children } ) => (
  <div>
    <AppNavigation />
    { children }
    <Alert stack={{limit: 3}} />
  </div>
)

Thanks.

I have an issue with my "Home" react ponent.

I am using react-router, and have a route file that contains the following:

 <Router history={ browserHistory }>
      <Route path="/" ponent={ App }>
        <IndexRoute ponent={ Home } />
      </Route>
    </Router>

Now, my Home ponent works when defined like this:

export const Home = () => <h3>Index</h3>;

But if I defined it like this:

class Home extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h3>InDex2</h3>
    );
  }
}

export default Home;

Then it is not working. Nothing gets rendered in the second case, while in the first case I can see 'Index'...

Do you have an idea why this is not working?

My App ponent is as simple as this:

export const App = ( { children } ) => (
  <div>
    <AppNavigation />
    { children }
    <Alert stack={{limit: 3}} />
  </div>
)

Thanks.

• javascript
• reactjs
• ponents
• render
• router

Share Improve this question Follow edited Dec 28, 2016 at 16:53 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Dec 28, 2016 at 16:44 user3900157user3900157 24911 gold badge77 silver badges1919 bronze badges 1

• Did my answer work for you? Consider accepting it if that's the case. – Tholle Commented Aug 9, 2018 at 11:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

To import your first ponent, you need to take the named export Home:

// Home.js
export const Home = () => <h3>Index</h3>;

// someOtherFile.js
import { Home } from './Home';

In your second case, you need to take the default export:

// someOtherFile.js
import Home from './Home';

本文标签： javascriptReact Component not renderedStack Overflow