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>
        )
    }
}

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'));

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（以及其他没有参数的其他路由）放在首位，那么它应该可以正常工作。

来自文档

Switch遍历所有子级元素并渲染第一个路径与当前网址匹配。随时使用您有多条路线，但您只想一条一次渲染它们。

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

1 个答案: