Question

我是ReactJS世界的新手，我在生产上遇到了麻烦。

因此，我正在学习路由器，因为我正在做一个具有登录名的网站。

import React from 'react';
import ReactDOM from 'react-dom';
import IndexPage from './IndexPage/IndexPage';
import HomePage from './HomePage/HomePage';
import { Router, Route, Redirect, Switch } from 'react-router-dom'
import AuthService from './services/AuthService';
import History from './services/History';

const auth = new AuthService();

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={(props) => (
      auth.loggedIn() === true
        ? <Component {...props} />
        : <Redirect to={{
            pathname: '/',
            state: { from: props.location }
          }} />
    )} />
  )

ReactDOM.render(
    <Router history={History}>
        <Switch>
            <Route exact path="/" component={IndexPage}/>
            <PrivateRoute path="/home" component={HomePage}/>
        </Switch>
    </Router>,
    document.getElementById('root'),
);

这是我的index.js文件，如您所见

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

此行会产生问题。如您所见，我使用的是完全相同的参数，如果不使用它，则会得到“ CANNOT GET / pagename”（用于其他组件）。现在，如果我用该行中的“精确”来构建网站，那么我将有一个空白页，否则，如果我构建的网站没有确切的“作用”，则为空白，但是当我登录时，我的主页将位于登录表单后面（我在同一页面中看到了两者。）

有人可以帮助我吗？我认为webpack和程序包是正确的。

谢谢！

更新，我解决了！

正如哈桑所说，我试图以此方式更改路线（也删除了确切的参数）：

<PrivateRoute path="/home" component={HomePage}/>
<Route path="/" component={IndexPage}/>

它起作用了：D！希望对您有所帮助！

Answer 1

尝试从以下位置更改代码流

<Route exact path="/" component={IndexPage}/>
<PrivateRoute path="/home" component={HomePage}/>

收件人

<PrivateRoute path="/home" component={HomePage}/>
<Route path="/" exact component={IndexPage}/>

我有这样的问题。希望这对您也有用。让我知道怎么回事

“精确”导致空白页生产模式

1 个答案: