路由重定向到任何反应路由器4 [重复]

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