React-router path参数不起作用

react-router path parameter doesn't work

本文关键字：不起作用 参数 path React-router      更新时间：2023-09-26

我从0.13升级了react-router。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

当我打开a链接时，CustomerDetail组件不呈现，只有空体

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

历史是它自己的模块，使用https://www.npmjs.com/package/history代替你的createBrowserHistory要求。

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

相关文章：