Reactjs React动态路由+；CMS

我正在根据我的CMS构建一个React应用程序，它提供了一个用于获取页面等的API。但是，我对如何使用React路由器进行动态路由有疑问。我不知道任何URL，因为页面是在我的CMS中定义的，并且可以在用户创建/重命名/删除页面时更改

到目前为止，我已经创建了一个通配符路由：

<Route path="*" component={PageResolver} />

如果我点击frontpage，CMS将以“frontpage”的页面类型响应，我现在知道通过我的页面解析器呈现什么组件

我的页面解析器如下所示：

class PageResolver extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            page: null
        };
    }

    componentDidMount() {
        this.getPage(this.props);
    }

    componentWillReceiveProps(nextProps) {
        this.getPage(nextProps);
    }

    private getPage(props) {
        const { url } = props.match;

        axios({
            method: 'GET',
            url: 'http://localhost:3000/pages',
            params: {
                url
            }
        }).then(({ data }) => {
            this.setState({ page: null });

            if (data[0]) {
                const pageType = data[0].type;

                this.setState(() => ({ page: pages[pageType] }));
            } else {
                this.setState(() => ({ page: NotFound }));
            }
        });
    }

    render() {
        const { page: PageComponent } = this.state;

        return (
            PageComponent ? (
                <PageComponent />
            ) : null
        );
    }
}

类页面解析器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
页码：空
};
}
componentDidMount（）{
this.getPage（this.props）；
}
组件将接收道具（下一步）{
这个.getPage（nextrops）；
}
私人主页（道具）{
const{url}=props.match；
axios({
方法：“GET”，
网址：'http://localhost:3000/pages',
参数：{
网址
}
})。然后（{data}）=>{
this.setState（{page:null}）；
如果（数据[0]）{
常量pageType=数据[0]。类型；
this.setState（（）=>（{page:pages[pageType]}））；
}否则{
this.setState（（）=>（{page:NotFound}））；
}
});
}
render（）{
const{page:PageComponent}=this.state；
返回(
页面组件(
)：null
);
}
}

有没有官方的方法或者至少有更好的方法来做到这一点。上面的代码有点黑

class PageResolver extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            page: null
        };
    }

    componentDidMount() {
        this.getPage(this.props);
    }

    componentWillReceiveProps(nextProps) {
        this.getPage(nextProps);
    }

    private getPage(props) {
        const { url } = props.match;

        axios({
            method: 'GET',
            url: 'http://localhost:3000/pages',
            params: {
                url
            }
        }).then(({ data }) => {
            this.setState({ page: null });

            if (data[0]) {
                const pageType = data[0].type;

                this.setState(() => ({ page: pages[pageType] }));
            } else {
                this.setState(() => ({ page: NotFound }));
            }
        });
    }

    render() {
        const { page: PageComponent } = this.state;

        return (
            PageComponent ? (
                <PageComponent />
            ) : null
        );
    }
}