我想解决此警告。将react-router-dom添加到App.js后,会收到此警告。 (应用程序本身在此警告下运行正常。)
警告消息:
index.js:1 Warning: Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component
in Route (at App.js:34)
in App (at src/index.js:9)
in Router (created by HashRouter)
in HashRouter (at src/index.js:8)
我只是将状态传递给子组件App.js App.js
import React, { Component } from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import './App.css'
import MasterPassword from './MasterPassword'
import EncryptForm from './EncryptForm'
import NotFound from './NotFound'
class App extends Component {
constructor(props) {
super(props)
this.state = {
masterPassword: null
}
}
getMasterPassword = userPassword => {
this.setState({
masterPassword: userPassword
})
}
render() {
return (
<Router>
{!this.state.masterPassword
? <MasterPassword
path='/ask-password'
masterPassword={this.state.masterPassword}
onStorePassword={this.getMasterPassword}
/>
: <div className="App">
<Switch>
<Route exact path='/' render={() => <EncryptForm masterPassword={this.state.masterPassword} />} />
<Route component={<NotFound />} />
</Switch>
</div>}
</Router>
)
}
}
export default App
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter } from 'react-router-dom'
import './index.css'
import App from './components/App'
import * as serviceWorker from './serviceWorker'
ReactDOM.render(<HashRouter>
<App />
</HashRouter>, document.getElementById('root'))
serviceWorker.unregister()
谢谢!
答案 0 :(得分:1)
将此<Route component={<NotFound />} />
更改为此:<Route component={NotFound} />
对于类似这样的库,这是非常标准的行为。他们希望像这样<component />
而不是这样{component}
来渲染组件。
答案 1 :(得分:0)
@Asher的答案应该起作用,但是如果您有想要传递的道具,那么可以在创建React元素的内联函数中传递组件:
<Switch><Route component={() => <NotFound message={notFoundMessage} />}/></Switch>