Question

我不确定为什么所有内容都会重定向到空白页：

我正在使用：

"react-router": "^4.2.0",
"react-router-dom": "^4.1.1",

App.js

import { BrowserRouter, Route, Switch } from 'react-router-dom';

    class Container extends Component{
      render() {
        return (
          <div>{this.props.children}</div>
        );
      }
    }

    export default class App extends Component {
      render() {
        return (
          <BrowserRouter onUpdate={onUpdate}>
            <Switch>
              <Route component={HomePageContainer} exact path="/" />
              <Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
              <Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
              <Route component={Container} path="/" />
              <Route component={NotFound} path="*" />
            </Switch>
          </BrowserRouter>
        );
      }
    }

首页路线'/'工作正常。

所有其他路线都不起作用。

例如，当用户点击重定向到这些路由的超链接或默认路由以外的其他路由时，我会得到一个空白页面：

   <Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
      <Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />

当我使用react-router v3 时，以下是我的路线如何工作：

<Router history={browserHistory} onUpdate={onUpdate}>
    <Route path="/">
      <IndexRoute component={HomePageContainer} />
      <Route component={InterviewContainer} name="interview"  path="interviews/companies/:companyId" />
      <Route component={About} name="about" path="about"  />
      <Route component={JobList} name="jobs" path="jobs"  />
    </Route>
    <Route component={Container} path="/"  />
    <Route component={NotFound} path="*"  />
</Router>

注意我最近也为 companydetail 添加了新路线。

Answer 1

您的所有路径都需要与基准路径相关，即/

将路由器配置更改为

 <Switch>
          <Route component={HomePageContainer} exact path="/" />
          <Route component={CompanyDetailContainer} name="companydetail" path="/interviews/companies/:companyId/details" />
          <Route component={InterviewContainer} name="interview" path="/interviews/companies/:companyId" />
          <Route component={Container} path="/" />
          <Route component={NotFound} path="*" />
 </Switch>

Answer 2

尝试使用匿名函数包装路由器。

const App = () => (
      <BrowserRouter onUpdate={onUpdate}>
        <Switch>
          <Route component={HomePageContainer} exact path="/" />
          <Route component={CompanyDetailContainer} name="companydetail" path="interviews/companies/:companyId/details" />
          <Route component={InterviewContainer} name="interview" path="interviews/companies/:companyId" />
          <Route component={Container} path="/" />
          <Route component={NotFound} path="*" />
        </Switch>
      </BrowserRouter>
)

route重定向到没有反应路由器4

2 个答案: