Javascript 无法在第一页加载时获取参数

我正在尝试为我的react应用程序中的某些页面应用几个背景主题。为此，我的方法是从url中读取页面名称，并根据页面名称应用几个主题

我已经创建了一个布局来呈现我的组件，从那里我试图从url读取页面名称

我的方法

const HomeLayout = ({ component: Component, ...rest }) => {

    const activePage = window.location.pathname.replace(/^\/([^\/]*).*$/, '$1');
    const gradientPages_type1 = ['consumer_add', 'myprofile', 'nfc_add','evc_detail'];
    const gradientPages_type2 = [''];
    const gradientPages_type3 = ['dashboard']


    return (
        <PrivateRoute {...rest} render={matchProps => (
            <div id="">
                <div className="DefaultLayout mx-auto" id={gradientPages_type1.includes(activePage) ?
                    'bg_gradient' : gradientPages_type2.includes(activePage) ? 'bg_gradient2' : gradientPages_type3.includes(activePage) ?'bg_gradient3':'bg_normal'}>
                    <div className="Header"><Header /></div>
                    <div><Component {...matchProps} /></div>
                </div>
            </div>
        )} />
    )
};

export default HomeLayout;

index.js

ReactDOM.render(<Provider store={store}><Router history={history}><App /></Router></Provider>, document.getElementById('root'));

ReactDOM.render（，document.getElementById（'root'）；

问题是我在

开关内使用了
。我所要做的是将
AuthContext
置于开关外部，它就工作了。
问题是我在
开关内部使用了
。我所要做的就是将
AuthContext
置于交换机之外，它就工作了。
我建议您像我一样使用react router dom和use react router library。只要查看文档，我想你就能找到解决方案。@RudolfCicko我正在使用react路由器dom。我用更多的代码更新了我的问题。您是否可以使用
window.location.pathname.replace（/^\/（[^\/]*）.*$/，“$1”）来进行查看尝试使用useReactRouter库。我建议您像我一样使用react router dom和use react router库。只要查看文档，我想你就能找到解决方案。@RudolfCicko我正在使用react路由器dom。我用更多的代码更新了我的问题。您是否可以使用
window.location.pathname.replace（/^\/（[^\/]*）.*$/，“$1”）来进行查看尝试使用useReactRouter库。
ReactDOM.render(<Provider store={store}><Router history={history}><App /></Router></Provider>, document.getElementById('root'));