Question

我可以成功创建一条路线，如：

    <Route path="/details/:id" component={DishDetails}/>

但如果我想添加可选参数：

    <Route path="/details/:id(/:query)(/:type)" component={DishDetails}/>

它没有成功路由。完整代码（请注意alert()中的DishDetails.contructor仅针对第一条路线运行：

App.js：

import React, { Component } from 'react';
import './App.css';
import { Route } from 'react-router-dom';
import Welcome from './Welcome/Welcome';
import { modelInstance } from './data/DinnerModel'
import SelectDish from "./SelectDish/SelectDish";
import DishDetails from "./DishDetails/DishDetails";

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      title: 'Dinner Planner',
    }
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <div className="topdiv">
              <h1 className="App-title">{this.state.title}</h1>
          </div>
          {/* We render different components based on the path */}

        </header>

        <Route exact path="/" component={Welcome}/>
        <Route path="/search" render={() => <SelectDish model={modelInstance}/>}/>
        <Route path="/details/:id(/:query)(/:type)" component={DishDetails}/>
      </div>
    );
  }
}

export default App;

DishDetails.js：

import React, {Component} from "react";
import "./DishDetails.css";
import {Link} from "react-router-dom";
import {modelInstance} from "../data/DinnerModel";
import IngredientsList from "../IngredientsList/IngredientsList";
import Instructions from "../Instructions/Instructions";
import Sidebar from "../Sidebar/Sidebar";

class DishDetails extends Component {
    constructor(props) {
        super(props);
        alert("Got here"); // Only prints for the first route
        this.state = {
            id: props.match.params.id,
        };
    }

    componentDidMount = () => {
        modelInstance.getDish(this.props.id)
        .then(dish=> {
            this.setState({
                status:"LOADED",
                ingredients: dish.extendedIngredients,
                dishText: dish.winePairing.pairingText,

                title: dish.title,
                img: dish.image,

                instructions: dish.instructions,

            })
        })
        .catch(()=>{
            this.setState({
                status:"ERROR",
            })
        })
    }

    render() {
        switch(this.state.status){
            case "INITIAL":
                return (
                    <p>Loading...</p>
                );
            case "ERROR":
                return (
                    <p>An error has occurred, please refresh the page</p>
                );
        }
        return (
            //Only come here if we get a successful response
            <div id="details">
                <div className="dishdetails">
                    <h3 id="dishtitle" className="dishtitle">{this.state.title}</h3>
                    <img alt="details-img" id="dishimg" className="dishimg" src={this.state.img}/>
                    <div id="dishtext" className="dishtext col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        {this.state.dishText}
                    </div>
                    <div className="back-to-search">
                        <Link to={{
                            pathname:"/search",
                            state: {
                                params: {
                                    query:this.props.query,
                                    type:this.props.type,
                                }
                            },
                            }}>
                            <button id="details-backbutton" className="btn btn-default" type="button">Back to Search</button>
                            </Link>
                    </div>
                </div>
                <Instructions instructions={this.state.instructions} />
                <IngredientsList ingredients={this.state.ingredients} />
                <Sidebar />
            </div>
        );
    }
}


export default DishDetails;

如何选择url参数？

Answer 1

您可以使用问号执行此操作：

<Route path="/details/:id/:query?/:type?" component={DishDetails}/>

括号语法用于声明自定义正则表达式。有关确切语法的详细信息，请参阅path-to-regexp docs。

无法添加可选的URL参数来响应路由

1 个答案: