时间戳

首页 > 解决方案 > 反应路由器更改路径但不渲染组件

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

问题描述

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

客户成功.js

import React from 'react';

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

        this.state = {

        }
    }

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

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

标签： javascriptreactjsreact-router-dom

解决方案

由于您的路线顺序

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

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

如果您更改路线的顺序以将 /success 放在首位（以及任何其他没有参数的路线），它应该可以正常工作。

从文档

Switch 查看其所有子元素并呈现其路径与当前 URL 匹配的第一个元素。在您有多个路线的任何时候使用 a，但您希望一次只渲染其中一个。

推荐阅读