Question

我的用例是：我有一个要控制URL的组件。它将有3个“选择”选项-一个用于选择客户，一个用于选择快递，以及一个用于选择服务。它应该（a）通过呈现所提供的这三个选项中的正确选项对路线做出正确的反应，（b）呈现，即使这些参数不存在，并且（c）适当地更改路线单击选项时

这是我的基本App.js，它说明了包含路由以及我期望url的外观：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import autoBind from 'react-autobind';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { BrowserRouter, Route, NavLink } from "react-router-dom";
import CcsSelect from './customer-prices/ccs-select';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            customers: window._customers_json || [],
            couriers: window._couriers_json || [],
            services: window._services_json || []
        };

        autoBind(this);
    }

    render() {
        return (
            <>
                <ToastContainer />
                <BrowserRouter basename="/app/customer-prices">
                    <Route exact={false} path="/:customerid/:courierid/:serviceid">
                        <CcsSelect/>
                    </Route>

                    <h1>I'm in react! Hi Mom</h1>
                </BrowserRouter>
            </>
        )
    }
}


const $container = document.getElementById('react-container');
if ($container) {
    ReactDOM.render(<App />, $container);
}

这是我的ccs-select.jsx文件，我希望它在没有参数的情况下也可以在Route EVEN中呈现：

import React, { Component } from 'react';
import { BrowserRouter, Route, withRouter } from "react-router-dom";
import autoBind from 'react-autobind';

class CcsSelect extends Component {
    constructor(props) {
        super(props);

        console.log(props);

        this.state = {
            customer: props.match.params.customerid,
            courier: props.match.params.courierid,
            service: props.match.params.serviceid
        };

        autoBind(this);
    }

    render() {
        return (
            <div>
                <p>I'm in the router</p>
                <p>customer id: {this.state.customer}</p>
                <p>courier id: {this.state.courier}</p>
                <p>service id: {this.state.service}</p>
            </div>

        )
    }
}

export default withRouter(CcsSelect);

现在，CssSelect现在显然不会改变路径-我现在还没有解决。当我将路径设置为/app/customer-prices/x/y/z时，它会适当地进行渲染，包括设置状态变量并渲染x，y，z字符串。但是当我使用url /app/customer-prices/时，它不是呈现的-而我想要的是呈现它，并让state代表每个url参数（如果未提供）为null。

获得我要找的东西的最好方法是什么？

Answer 1

当前，您只有一条路线的路径为/:customerid/:courierid/:serviceid。

您必须使用路径/和exact参数设置为true来创建新路由，以处理URL /app/customer-prices/。在这条路线中，您可以拥有与另一条路线相同的孩子，这不是问题。

这里有个例子：

<BrowserRouter basename="/app/customer-prices">
  <Route exact={false} path="/:customerid/:courierid/:serviceid">
    <CcsSelect/>
  </Route>
  <Route exact path="/">
    <CcsSelectOrAnotherComponent/>
  </Route>

  <h1>I'm in react! Hi Mom</h1>
</BrowserRouter>

React Router-即使没有匹配项，呈现的withRouter组件

1 个答案: