application.js
(网络包的入口点)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(<App />, document.getElementById('app'))
});
App.jsx
import React from 'react'
import {
BrowserRouter as Router,
Switch,
Route
} from 'react-router-dom'
import Navbar from './components/Navbar'
import LandingPage from './components/landingPage'
import Clients from './components/Clients'
class App extends React.Component {
render(){
return (
<Router>
<div>
<Navbar />
<Switch>
<div className="container">
<Route exact path="/app" component={LandingPage} />
<Route exact path="/app/clients" component={Clients} />
</div>
</Switch>
</div>
</Router>
)
}
}
export default App
components/LandingPage.jsx
import React from 'react';
const LandingPage = (props) =>(
<div>
<h1>Hello World</h1>
</div>
)
export default LandingPage
components/Clients.jsx
import React from 'react';
class Clients extends React.Component {
render(props) {
return(
<div id="clients" className="clients">
<div className="row">
Clients!
</div>
</div>
)
}
}
export default Clients
components/Navbar.jsx
import React from 'react'
import {Link} from 'react-router-dom';
const Navbar = (props) => (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li><Link to="/app/clients">GOTO CLIENTS</Link></li>
</ul>
</div>
</nav>
)
export default Navbar
控制台日志出错:
警告:React无法识别DOM元素上的computedMatch prop . 如果您故意希望它作为自定义属性显示在DOM中,请将其拼写为小写的computedmatch . 如果您不小心从父组件传递它,请将其从DOM元素中删除 . 在应用中的div(由App创建)在div中(由App创建)在路由器(由BrowserRouter创建)中的BrowserRouter(由App创建)在App中
我在各种其他堆栈帖子中读到,这是一个浮动道具错误,当道具绕半危险时 . 但是我没有在这里传递任何道具,并且对于为什么抛出这个错误感到困惑 . 应用程序和组件也可以渲染 .
有什么建议吗?
1 回答
在
App.jsx
中,您正在指定Switch
逻辑,如下所示:但是,
Switch
组件只需要Route
作为其子项 . 删除<div className="container">
部分,它应该解决此错误消息 .