无法通过 react-router-dom 使用反应钩子

Question

I'm using a class component as a parent for my functional components, using a useState hook while rendering the components with react-router crash the app, however, if the components are placed normally in the parent class component the app compiles fine.

[error][1] [1]: https://i.stack.imgur.com/E4lKn.png

this does NOT WORK:

 import React, {Component, useState} from 'react'; import {Route, BrowserRouter as Router, Switch} from 'react-router-dom' class App extends Component { render(){ return ( <Router> <Switch> <Route exact path='/' render={FrontPage}/> </Switch> </Router> ); } } const FrontPage = () => { const [a, b] = useState('') return ( <div> hello world </div> ) } export default App;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

this WORKS

 import React, {Component, useState} from 'react'; //import {Route, BrowserRouter as Router, Switch} from 'react-router-dom' class App extends Component { render(){ return ( <FrontPage/> ); } } const FrontPage = () => { const [a, b] = useState('') return ( <div> hello world </div> ) } export default App;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

<Route exact path='/' render={FrontPage}/>

That's not the correct way to use the render prop. If you just want to pass in a component, you can use the component prop as in:

<Route exact path='/' component={FrontPage}/>

If you want to use the render prop, you need to pass in a function:

<Route exact path='/' render={routeProps => <FrontPage {...routeProps} />}/>