路由重定向到什么都没有 react-router 4 [英] route redirects to nothing react-router 4

问题描述

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

I'm not sure why everything is redirecting to a blank page:

我正在使用:

"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>
        );
      }
    }

到/"的主页路由工作正常.

Homepage route to '/' is working fine.

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

What's not working are all the other routes.

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

For example when a user clicks a hyperlink that redirects to these routes or other routes other than the default route, I'm getting a blank page:

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

以下是我使用 react-router v3 时路由的工作方式:

Here is how my routes were working when I was using 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 添加了新路由.

Note that I also added the new route for companydetail just recently.

推荐答案

尝试将路由器封装在匿名函数中.

Try wrapping your router in an anonymous function.

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>
)

这篇关于路由重定向到什么都没有 react-router 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！