Question

我尝试进一步分离组件，然后遇到了这个奇怪的错误。我遮掩了其他一般进口物品。所有组件均可正确导入并正常工作。

会发生什么情况，我将鼠标置于“ /”上，然后单击一个按钮以导航至仪表板为空白页（URL确实发生了更改）。然后，在浏览器中单击刷新，然后显示正确的组件。如果我返回登录页面，也会发生这种情况；在我刷新之前是空白的。

在我的应用程序组件中

import history from './services/history';
import Routes from './routes';

function App() {
  return (
    <Router history={history}>
      <Routes />
    </Router>
  );

我的历史记录组件（超级简单）

import { createBrowserHistory} from 'history';

const history = createBrowserHistory();

export default history;

最后是我的路线：

import Landing from "../pages/landing/landing.page"
import Dashboard from "../pages/dashboard/dashboard.page.jsx"

export default function Routes() {
  return (
    <Switch>
      <Route path="/" exact component={Landing}/>
      <Route path="/dashboard" component={Dashboard}/>
    </Switch>
  );

这是我的登录页面，点击该按钮导航至“ /仪表板”

import { Link } from "react-router-dom";

function Landing () {
  return (
    <div class="landing-container">
      <Link to="/dashboard"><button> Setup Tests </button></Link>

    </div>
  ) 
}

export default Landing;

Answer 1

您似乎正在使用Router中的react-router-dom。据我了解，您必须根据浏览器的使用情况导入BrowserRouter。因此您的代码如下所示：

import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter history={history}>
      <Routes />
    </Router>
  );
}

React Router-在刷新浏览器之前页面不会呈现

1 个答案: