Javascript 反应路由器更改路径但不渲染组件

我正在创建一个客户页面，他们可以在其中查看报价和/或修改报价。在他们对自己的报价感到满意后，他们可以接受它，这将给他们带来一个成功的页面。我已经设置了路由并创建了组件，但由于某种原因，当我在我的CustomerHome页面中单击

链接

组件时，它会更改url中的路径，但不会呈现我的成功页面

CustomerHome.js

import React from 'react';
import { Link } from 'react-router-dom';
import Button from '../../components/Spinner/Button';
import '../../StyleSheets/AdContract.css';
import '../../StyleSheets/Button.css';

export default class CustomerPage extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            QuoteID: this.props.match.params.id,
            CustomerFirst: "",
            CustomerLast: "",

        }
    }

    componentDidMount(){
        socket.emit('SelectCustomerQuote', this.props.match.params.id, function(result){
            this.setState({
                CustomerFirst: result[0].CustomerFirst,
                CustomerLast: result[0].CustomerLast,
            })
        }.bind(this));
    }

    AcceptedQuote(){
        console.log("Quote Accepted");
    }


    render(){
        return(
            <div id="CustomerContainer" style={{width: '100%', height: '100%'}}>
                <div id="CustomerContent" className="fade-in" style={{textAlign: 'center', width: '100%', height: '100%'}}>
                    <div id="Welcome" style={{marginTop: '15%'}}>
                        <p style={{fontSize: '35px', fontWeight: 'bold'}}>Hello, {this.state.CustomerFirst + " " + this.state.CustomerLast}</p>
                        <p style={{fontSize: '20px', color: 'orange'}}><b>Your Quote Is Ready!</b></p>
                    </div>

                    <div>
                        {/*<Button click={this.AcceptedQuote.bind(this)} name="Accept Quote" color="G-green"></Button>*/}
                        <Link className="ButtonUI G-green" to="/customer/success">Accept Quote</Link>
                    </div>
                </div>
            </div>
        )
    }
}

从“React”导入React；
从'react router dom'导入{Link}；
从“../../components/Spinner/Button”导入按钮；
导入“../StyleSheets/AdContract.css”；
导入“../StyleSheets/Button.css”；
导出默认类CustomerPage扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
QuoteID:this.props.match.params.id，
客户第一次：“，
CustomerLast:“”，
}
}
componentDidMount（）{
emit（'SelectCustomerQuote'，this.props.match.params.id，函数（结果）{
这是我的国家({
CustomerFirst:结果[0]。CustomerFirst，
CustomerLast:结果[0]。CustomerLast，
})
}.约束（这个）；
}
接受报价（）{
控制台日志（“接受报价”）；
}
render（）{
返回(
您好，{this.state.CustomerFirst+“”+this.state.CustomerLast}
您的报价已经准备好了
{/**/}
接受报价
)
}
}

Index.js

import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/fn/array/find';
import 'core-js/fn/array/includes';
import 'core-js/fn/number/is-nan';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import CustomerPage from './imports/CustomerPage/CustomerHome.js';
import CustomerSuccess from './imports/CustomerPage/CustomerSuccess.js';

import { BrowserRouter, Route, Link, Switch } from 'react-router-dom' 

ReactDOM.render((
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={App} />
            <Route path='/customer/:id' component={CustomerPage} />
            <Route path='/customer/success' component={CustomerSuccess} />
        </Switch>
    </BrowserRouter>), document.getElementById('appRoot'));

导入'core js/es6/map'；
导入“core js/es6/set”；
导入“core js/fn/array/find”；
导入“core js/fn/array/includes”；
导入“core js/fn/number/is nan”；
从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“/imports/CustomerPage/CustomerHome.js”导入CustomerPage；
从“./imports/CustomerPage/CustomerSuccess.js”导入CustomerSuccess；
从“react router dom”导入{BrowserRouter，Route，Link，Switch}
ReactDOM.render((
)，document.getElementById（'appRoot'）；

CustomerSuccess.js

import React from 'react';

export default class CustomerSuccess extends React.Component{
    constructor(props){
        super(props);

        this.state = {

        }
    }

    render(){
        return(
            <div>
                Success!
            </div>
        )
    }
}

从“React”导入React；
导出默认类CustomerSuccess扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
}
}
render（）{
返回(
成功！
)
}
}

---

我并不完全熟悉react路由器的工作原理，所以可能我只是错过了一些简单的东西，或者做了一些完全错误的事情。如果有人能给我一些关于他们认为我的问题可能是什么的想法或建议，我将不胜感激！谢谢。

因为您的路线顺序

    <Route path='/customer/:id' component={CustomerPage} />
    <Route path='/customer/success' component={CustomerSuccess} />

/customer/：id将与/customer/success匹配，并将id参数设置为字符串“success”

如果您将路由的顺序更改为put/success first（以及任何其他没有参数的路由），它应该可以正常工作

从文件中

一个开关检查它的所有子项 元素并渲染其路径为 与当前URL匹配。随时使用 您有多条路线，但只需要一条 一次渲染它们的一部分

---

因为你的路线的顺序

    <Route path='/customer/:id' component={CustomerPage} />
    <Route path='/customer/success' component={CustomerSuccess} />

/customer/：id将与/customer/success匹配，并将id参数设置为字符串“success”

如果您将路由的顺序更改为put/success first（以及任何其他没有参数的路由），它应该可以正常工作

从文件中

一个开关检查它的所有子项 元素并渲染其路径为 与当前URL匹配。随时使用 您有多条路线，但只需要一条 一次渲染它们的一部分

---

试着改变一下顺序。我认为/customer/：id是匹配的（将：id设置为“success”）。首先放置/customer/success，然后它将匹配该路径，然后转到其他路径进行其他操作。@CalIrvine好的，我将尝试一下。@CalIrvine成功了，谢谢！您很高兴更改订单。我认为/customer/：id是匹配的（将：id设置为“success”）。首先放置/customer/success，然后它将匹配该路径，然后转到其他路径进行其他操作。@CalIrvine好的，我将尝试一下。@CalIrvine成功了，谢谢！你很好，或者我们可以使用确切的关键字。@ZunaibImtiaz同样使用确切的关键字是个好主意，但我相信你仍然会遇到同样的问题。由于/：param路径将首先匹配，因此它不会到达您的/success路径，无论它是否标记为exact。或者我们可以使用exact关键字。@ZunaibImtiaz使用exact关键字也是一个好主意，但我相信您仍然会遇到同样的问题。由于/：param路由将首先匹配，因此它不会到达您的/success路由，无论它是否标记为exact。