Question

当我从/ home导航到/ dashboard时，路由器工作正常但是当我从/ home导航到/ profile：id时，路由器导航到那个也正常工作的配置文件页面，但当我刷新它时，它变成了空白页，并没有给我任何404或重定向回主页，我正在使用

react-router: "^4.2.0", react-router-dom: "^4.2.2", react-router-redux: "5.0.0-alpha.6",

那么，如何摆脱空白页面，如果url位于/ profile / 5，然后在刷新页面上导航回主页或任何适当的内容，请帮忙吗？

index.js

ReactDOM.render(
 <Provider store={store}>
    <ConnectedRouter history={history}>
        <Switch>
            <Route path="/" component={App} />
            <Route component={Page404} />
        </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app-site')
);

App.js

<Switch>
    <Route path={`/login`} component={LoginMember} />
    <Route path={`/registermember`} component={SignUp} />
    <Authentication component={AuthenticateRoute} />
    <Route component={Page404} />
</Switch>

const AuthenticateRoute = ({ match }) => (
 <Switch>
    <Authentication path={`${match.url}`} component={MainApp} />
    <Route component={Page404} />
 </Switch>
);

MainApp

<Switch>                
    <Route path={`/home`} component={Home} />
    <Route path={`/profile/:id`} component={Profile} />
    <Route component={Page404} />
</Switch>

Answer 1

从您的代码中

<Switch>
  <Route path="/" component={App} />
  <Route component={Page404} />
</Switch>

<Route path="/" component={App} />导致为每条路线呈现App组件。因此，如果您刷新页面，Page404将无法呈现该页面。

解决方案：

将exact放入/。

<Route exact  path="/" component={App} />

Answer 2

这是因为react无法找到用户导航过的url的历史记录。基本上，react属性将搜索保存在历史记录中的URL，但是此处开发人员未使用该URL。要解决此问题，请遵循以下三个步骤。从“ react-router-dom”导入类似import {useHistory}的用法；分配给变量并使用所有组件都包裹在其中的主div /路由器

Answer 3

我已经解决了这个问题，我的问题在package.json中，我在package.json中指定了主页，例如：

.
.
"homepage": "http://mywebsite.com/relativepath"
.
.

在反应路由器

3 个答案: