reactjs - 404页面 - 和语言参数丢失处理问题

Question

我是 reactjs 的新手-在带有语言切换的网站上工作我正在尝试创建一个错误组件以用作 404 页面-但也尝试查看如何配置/自动切换网站以使用默认语言如果参数未定义或设置错误路径仍然监听 lang 参数。

router.js 目前看起来像这样

    <Switch>
                    <Route exact path='/' render={() => (<Redirect to='/de/dienstleistungen/geistiges-eigentum' />)} />
                    <Route path='/:langURL/services' component={Services} />
                    <Route path='/:langURL/dienstleistungen' component={Services} />
                    <Route path='/services' component={Services} />
                    <Route path='/:langURL/how-it-works' component={HowItWorks} />
                    <Route path='/:langURL/anleitung' component={HowItWorks} />
                    <Route path='/:langURL/features' component={Features} />
                    <Route path='/:langURL/funktionen' component={Features} />
                    <Route path='/:langURL/beliebte-projekte' component={BundleDetails} />
                    <Route path='/:langURL/popular-projects' component={BundleDetails} />
                    <Route component={Error} />
</Switch>

Answer 1

我认为您的意思是您希望用户不能在 URL 中提供语言参数？现在，如果他们不提供它，他们会被扔进错误组件中吗？您可以使用:langURL? 将该参数设为可选：

<Switch>
    <Route exact path='/' render={() => (<Redirect to='/de/dienstleistungen/geistiges-eigentum' />)} />
    <Route path='/:langURL?/services' component={Services} />
    <Route path='/:langURL?/dienstleistungen' component={Services} />
    <Route path='/services' component={Services} />
    <Route path='/:langURL?/how-it-works' component={HowItWorks} />
    <Route path='/:langURL?/anleitung' component={HowItWorks} />
    <Route path='/:langURL?/features' component={Features} />
    <Route path='/:langURL?/funktionen' component={Features} />
    <Route path='/:langURL?/beliebte-projekte' component={BundleDetails} />
    <Route path='/:langURL?/popular-projects' component={BundleDetails} />
    <Route component={Error} />
</Switch>