反应子目录中的路由错误

Question

我做了路由

    render(
      <Provider store={store}>
          <Router history={browserHistory }>
            <Route path='/MyAppName' component={TopContainer}>
                <IndexRoute component={Login} />
                <Route path='/main' component={MainRouteContainer} />   
                <Route path='/popup' component={StackViewContainer} />  
            </Route>
        </Router>
      </Provider>,
      document.getElementById('root')
    )

我有一个 apache http 目录

/var/www/html

因为还有其他网络应用所以我需要一个子目录

/var/www/html/MyAppName

并且上面目录中的文件是index.html和bundle.js。

如果我使用上面的路由代码访问它，它可以正常工作

http://www...com/MyAppName

问题是“/main”一旦被访问，地址字段中的url就变成了 http://www...com/MyAppName/main

此时，页面重新加载会导致“找不到页面”，因为 MyAppName 下没有“main”（只有 bundle.js）。

有什么建议吗？

谢谢

Answer 1

您可以将basename 属性添加到Router 标记

<Router history={browserHistory} basename="/subdirectory/path">

或在react-router-dom 中使用HashRouter。有了 hashRouter，就不需要basename attribute

<HashRouter>