CODEWITHSUNDEEP
javascriptreactjsreact-router
Matt
Matt

Reputation: 8942

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. 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>

Upvotes: 0

Views: 782

Answers (1)

nanobar
nanobar

Reputation: 66345

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.

Upvotes: 1

Related Questions