私は機能コンポーネントの親としてクラスコンポーネントを使用しています。react-routerを使用してコンポーネントをレンダリングするときにuseStateフックを使用すると、アプリがクラッシュしますが、コンポーネントが親クラスコンポーネントに正常に配置されている場合、アプリは正常にコンパイルされます。
[エラー] [1] [1]：https://i.stack.imgur.com/E4lKn.png
これは動作しません：
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>この作品
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><Route exact path='/' render={FrontPage}/>
それはrender小道具を使用する正しい方法ではありません。コンポーネントを渡すだけの場合は、次のようにコンポーネントプロップを使用できます。
<Route exact path='/' component={FrontPage}/>
レンダープロップを使用する場合は、関数を渡す必要があります。
<Route exact path='/' render={routeProps => <FrontPage {...routeProps} />}/>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加