[英]react-router path parameter doesn't work
I upgraded react-router from 0.13.x to 1.0, but now path parameter in url doesn't work. 我将react-router从0.13.x升级到1.0,但现在url中的path参数不起作用。 I use webpack-dev-server.
我使用webpack-dev-server。
index.jsx index.jsx
const React = require('react');
const ReactDOM = require('react-dom');
var Projects = require('./components/projects/projectsView').Projects;
var Products = require('./components/products/productsView').Products;
var Customers = require('./components/customers/customersView').Customers;
var CustomerDetail = require('./views/customerDetail').CustomerDetail;
var NavBar = require('./views/navigation').NavBar;
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var DefaultRoute = ReactRouter.DefaultRoute;
var RouteHandler = ReactRouter.RouteHandler;
var Link = ReactRouter.Link;
var IndexRoute = ReactRouter.IndexRoute;
var History = ReactRouter.History;
var createBrowserHistory = require('../../node_modules/react-router/node_modules/history/lib/createBrowserHistory');
class App extends React.Component {
constructor(props) {
super(props);
}
render () {
return (
<div>
<NavBar />
{this.props.children}
</div>
);
}
}
class Index extends React.Component{
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2> Welcome </h2>
</div>
);
}
}
// declare our routes and their hierarchy
let routes = (
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="products" component={Products} />
<Route path="projects" component={Projects} />
<Route path="customers" component={Customers} />
<Route path="/customer/:customerId" component={CustomerDetail} />
</Route>
);
ReactDOM.render(<Router routes={routes} history={createBrowserHistory()} />, document.getElementById('content'));
In components Products , Projects and Customers I create links: 在组件产品 , 项目和客户中,我创建链接:
<Link to={`/customerDetail/${that.props.customerIdProp}`} >{that.props.customerIdProp}</Link>
When I open the application, links are rendered correctly: 当我打开应用程序时,链接将正确呈现:
http://localhost:8080/customerDetail/123
http://localhost:8080/customerDetail/124
http://localhost:8080/customerDetail/125
When I open the a link, CustomerDetail component is not rendered only empty body 当我打开一个链接时, CustomerDetail组件不会仅呈现为空主体
<body>
<pre style="word-wrap: break-word; white-space: pre-wrap;"></pre>
</body>
History is it's own module, use https://www.npmjs.com/package/history instead of what you have for createBrowserHistory require. 历史记录是它自己的模块,请使用https://www.npmjs.com/package/history代替createBrowserHistory需要的内容。
As for your routes and links - they looks ok, apart from that you have /customer/
in the Routes and /customerDetail/
in the Link. 至于你的路线和联系-他们看起来不错,除了你有
/customer/
在路线和/customerDetail/
在链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.