我是React JS的新手,我正在尝试实现类似于Angular示例应用程序的东西。
我有一个客户表,希望在表格底部看到所选客户。
我用react-router-dom尝试了以下方法:
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render((<BrowserRouter><App /></BrowserRouter>), document.getElementById('root'));
registerServiceWorker();
// App.js
import React, { Component } from 'react';
import { Route } from 'react-router-dom/Route';
import Customers from './components/customers';
import Customer from './components/customer';
export default class App extends Component {
state = {
};
render() {
return (
<React.Fragment>
<Customers />
<Route path={`/customer/:id`} component={Customer} />
</React.Fragment>
);
}
}
// customers.jsx
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
export default class Customers extends Component {
state = {
customers: []
};
render() {
return (
<React.Fragment>
<header className="jumbotron"><h1>Customer List</h1></header>
<div className="container">
<table className="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
{this.state.customers.map(c => (<tr key={c.id}><td><Link to={`/customer/${c.id}`}>{c.name}</Link></td><td>{c.address}</td></tr>))}
</tbody>
</table>
<hr />
</div>
<footer className="footer">© 2018</footer>
</React.Fragment>
);
}
async componentDidMount() {
const result = await fetch('http://api.com/customers');
const customers = await result.json();
this.setState({ customers });
console.log(this.state.customers);
}
}
// customer.jsx
import React, { Component } from 'react';
export default class Customer extends Component {
render() {
return (<p>Customer</p>);
};
}
App.js中添加Route(Route path = {/customer/:id
} component = {Customer})的行导致错误。如果我删除该行,我可以看到客户表,但只要我添加此行,然后我收到该错误消息。
我错过了这个路由器的工作原理吗?
谢谢。
UPDATE
将App.js更改为此非常简单的版本会导致错误
import React, { Component } from 'react';
import { Route } from 'react-router-dom/Route';
export default class App extends Component {
state = {
};
render() {
return (
<div>
<Route exact path='/' render={() => (<h1>Hello</h1>)} />
<Route exact path='/customer' render={() => (<h1>Customer</h1>)} />
</div>
);
}
}
完整的错误消息是:
元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined。您可能忘记从其定义的文件中导出组件,或者您可能混淆了默认导入和命名导入。
改变这个:
import {Route} from "react-router-dom/Route";
对此:
import Route from "react-router-dom/Route";
直接访问时,Route是默认导出:"react-router-dom/Route"
从基础包导入Route
时可以使用命名导出
import {Route} from "react-router-dom";
但不要混淆两者。
我觉得问题在于路径中的后退。你能尝试一下吗?
render() {
return (
<React.Fragment>
<Customers />
<Route path='/customer/:id' component={Customer} />
</React.Fragment>
);
}
要么
render() {
return (
<React.Fragment>
<Customers />
<Route path={'/customer/:id'} component={Customer} />
</React.Fragment>
);
}
看起来你在Customer
组件的render()
方法中有语法错误,当你尝试使用/渲染它时会引起问题。
尝试以下修复:
export default class Customer extends Component {
render() {
return (<p> Customer</p>); // <-- remove the whitespace in
// closing tag </p> like so
};
}