React 路由器总是渲染 index.js 中指定的根组件答案

【问题标题】：React router renders the root component specified in index.js alwaysReact 路由器总是渲染 index.js 中指定的根组件
【发布时间】：2018-05-13 03:05:09
【问题描述】：

我正在使用 react-router-dom ("^4.2.2")

import React from 'react';
import ReactDOM from 'react-dom';
import AppContainer from './appContainer';

ReactDOM.render(<AppContainer />, document.getElementById('root'));

应用容器代码

 import React from 'react';
 import App from './App';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import CascadeLocationList from 
 './containers/cascadeLocation/cascadeLocationList'
 import store from './store';

 const AppContainer = () => (
  <Provider store={store}>
   <BrowserRouter>
    <Route path="/" component={LocationList} />
   </BrowserRouter>
  </Provider>
 );

导出默认AppContainer；

下面是我的路线文件

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import LocationList from 
'./containers/Location/LocationList'
import CascadeLocationShow from 
'./containers/Location/LocationShow'

 export const routes = () => {
   return (
    <Switch>
      <Route path="/" exact component={App} />
      {/* location routes */}
       <Route path="/fac_locations/:id" component=
        {LocationShow} />
       <Route path="/fac_locations" component={LocationList} 
       />
    </Switch>
   );
  };

我错过了电话 {routes()) 在我的 app.js 中。我现在已经添加了。即使现在问题仍然存在

页面将路径作为“/”并呈现指定的组件，而不考虑我去的路线。我在我的 url 中输入了“http://localhost:3001/fac_locations”并检查了反应控制台中的路径，路径是“/”并且呈现的组件始终是 App

【问题讨论】：

您是否尝试过将<Route exact path="/" component={App} /> 移动到最后而不是第一个
能不能把更新后的代码展示一下，目前比较难理解
问题现已解决：) 我错过了在我的应用程序组件中渲染 routes() 功能，第一次打电话时我打错了。现在它被正确渲染了。

标签： reactjs react-router-v4

【解决方案1】：

我错过了在我的 app.js 中调用 {routes()) 所以这是问题所在，它现在可以正常工作了 :)

【讨论】：