Реагирует на изменение маршрута маршрутизатора, но не на компонент рендеринга

Question

Я работаю над созданием страницы клиента, где они могут видеть свою цитату и / или изменять ее. После того, как они довольны полученной цитатой, они могут принять ее, и она приведет их на страницу успеха. У меня настроены маршруты и созданы компоненты, но по какой-то причине, когда я щелкаю компонент Link на моей странице 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>
        )
    }
}

Индекс. 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'));

CustomerSuccess. js

import React from 'react';

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

        this.state = {

        }
    }

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

Я не совсем знаком с как работает маршрутизатор, так что, может быть, я просто упускаю что-то простое здесь или делаю что-то совершенно не так Если бы кто-нибудь мог дать мне некоторые идеи или предложения относительно того, что, по их мнению, может быть моей проблемой, я был бы признателен за это! Спасибо.

Answer 1

Из-за порядка ваших маршрутов

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

/ customer /: id будет совпадать с / customer / success и установить в качестве параметра id строку «success»

Если вы измените порядок ваших маршрутов, чтобы поместить / success сначала (и любые другие маршруты, которые не имеют параметров), он должен работать нормально.

Из документов

Коммутатор просматривает все его дочерние элементы и отображает первый, чей путь соответствует текущему URL. Используйте любое время, когда у вас есть несколько маршрутов, но вы хотите, чтобы только один из них отображался одновременно.