Question

我将react-router从0.13.x升级到1.0，但现在url中的path参数不起作用。我使用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'));

在产品，项目和客户的组件中，我创建链接：

<Link to={`/customerDetail/${that.props.customerIdProp}`} >{that.props.customerIdProp}</Link>

当我打开应用程序时，链接会正确呈现：

http://localhost:8080/customerDetail/123
http://localhost:8080/customerDetail/124
http://localhost:8080/customerDetail/125

当我打开一个链接时， CustomerDetail 组件不会呈现为空体

   <body>
            <pre style="word-wrap: break-word; white-space: pre-wrap;"></pre>
    </body>

Answer 1

历史记录是它自己的模块，使用https://www.npmjs.com/package/history而不是createBrowserHistory所需的模块。

至于你的路线和链接 - 它们看起来还不错，除了你在路线中有/customer/和在链接中有/customerDetail/。

react-router路径参数不起作用

1 个答案: