react-router path parameter doesn't work
Question
I upgraded react-router from 0.13.x to 1.0, but now path parameter in url doesn't work. I use webpack-dev-server.
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
<body>
<pre style="word-wrap: break-word; white-space: pre-wrap;"></pre>
</body>
1 answers
solution1
1 ACCPTED 2015-10-26 13:47:06
History is it's own module, use https://www.npmjs.com/package/history instead of what you have for createBrowserHistory require.
As for your routes and links - they looks ok, apart from that you have /customer/ in the Routes and /customerDetail/ in the Link.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.