javascript - React 路由器改变路径但不渲染组件

Question

我正在创建一个客户页面，他们可以在其中查看报价和/或修改报价。当他们对报价感到满意后，他们可以接受它，这会将他们带到成功页面。我已设置路由并创建组件，但由于某种原因，当我单击 CustomerHome 页面中的 Link 组件时，它会更改 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>
        )
    }
}

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

Answer 1

因为你的路线顺序

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

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

如果您更改路由的顺序以将/success 首先(以及任何其他没有参数的路由)，它应该可以正常工作。

来自文档

A Switch looks through all its children elements and renders the first one whose path matches the current URL. Use a any time you have multiple routes, but you want only one of them to render at a time.