Question

我正在构建一个react-router-redux SPA。目前，该应用程序运行良好。无论用户输入什么URL，服务器都会发送index.html并从根路由（'/'）开始。我试图实现的是，当用户输入URL时，服务器仍将发送index.html，但react router将知道请求的URL并从此处启动SPA。

例如，现在如果我输入URL mydomain.com/profiles/1，服务器将发送文件，并且我将被重定向到根路由。我希望当我输入相同的URL时，React路由器将自动加载此路由的组件，而不是本地组件。

这是我的路线：

<Switch>
      <Route path='/logout' component={Logout} />
      <Route path='/profile/person/:personId' component={PersonProfile} />
      <Route path='/profile/sealant-customer/:customerId' component={SealantCustomerProfile} />
      <Route path="/search/sealant-customers" component={SealantCustomerSearch} />
      <Route path='/data/people' component={People} />
      <Route path="/" exact component={Home} />
      <Redirect to="/" />
</Switch>

它仅通过响应路由器链接起作用，而不通过浏览器地址栏起作用。

这可能是一个明显的问题，我在论坛上找不到答案。

谢谢。

Answer 1

不知道我是否正确回答了您的问题，但是我在应用程序中使用了它

class App extends React.Component {

render() {
    return (
        <Root>
          <Router>
             <Switch>
                <Route path='/' component={Home} />
                <Route path='/profiles/:profileId' component={Profile} />
             </Switch>
          </Router>
        </Root>
    )
}

通过路径发送到Route的profileId可以在Profile组件中提取为

 props.match.params.profileId

根据请求的路线加载React SPA

1 个答案: