Question

我已经创建了演示项目，以检查动态路由是否可以正常工作！

在该项目中，我面临以下两条路线的问题：

gj：jquery
ghj：jquery

这里我传递了一个名为jquery的参数，该路由将在Dynamic组件上呈现。

关于动态组件，我将根据页面和页面类型返回一些文本。我的代码如下。

componentDidMount() {
        console.log(this.props);
        let pagetype = Object.values(this.props.match.params)[0];

    let page2=this.props.location.pathname.split(":")[1];
    let pageName=this.props.location.pathname.split(":")[0].replace("/","");

    //alert("Hello, My type is " + pagetype);
    this.setState({
        type:page2,
        page:pageName
    })
}

 _getCurrentPage=()=>{
        switch(this.state.type){
            case "image":
                return (<h1>pageName: {this.state.page}  pagetype:{this.state.type}</h1>);
            case "formio":
                return (<h1>pageName: {this.state.page}  pagetype:{this.state.type}</h1>);
            case "jquery":
                return (<h1>pageName: {this.state.page}  pagetype:{this.state.type}</h1>);
            case "website":
                return (<h1>pageName: {this.state.page}  pagetype:{this.state.type}</h1>);
            default:
                return (<h1>No match</h1>);

        }
    }

 render(){

    return(
       this._getCurrentPage()
    )

现在在上面的两条路线中，我两次都获得输出，类似于下面的对。

如果我先单击任何其他路线，然后单击gj> ghj和ghj> gj，我将得到以下输出

pageName: gj pagetype:jquery
pageName: ghj pagetype:jquery

pageName: gj pagetype:jquery
pageName: gj pagetype:jquery

如果我先单击任何其他路线，然后单击ghj> gj和gj> ghj，我将得到以下输出

pageName: ghj pagetype:jquery
pageName: gj pagetype:jquery

pageName: ghj pagetype:jquery
pageName: ghj pagetype:jquery

两次渲染文本的原因是什么？ 我记录了pageType，pageName，看来还可以。对于其他路线，效果很好。

为什么我在reactjs路由中针对相同的网址得到两个结果？

0 个答案: