陣營路由器V4不工作

Question

嵌套的路線我剛剛升級反應路由器V4基於一個樣板從Fountain JS和反應15.4.2應用程式閱讀書籍this article後，我寫了這個：

// Index.js 
import 'babel-polyfill'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Route, BrowserRouter, Switch} from 'react-router-dom'; 
import {Main} from './app/pages/main'; 
import {App} from './app/pages/app'; 

import './index.scss'; 
const MainRouter =() => (
<div> 
<main> 
     <Switch> 
     <Route path="/home" component={Main}/> 
     <Route path="/app" component={App}/> 
     </Switch> 
    </main> 
    </div> 
); 

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

// App.jsx 
import React, {Component} from 'react'; 
import {Switch, Route} from 'react-router-dom'; 
import PropTypes from 'prop-types'; 
import {Dashboard} from './app/dashboard'; 
import {Money} from './app/money'; 
import {Header} from '../tpl/header'; 
import {Footer} from '../tpl/footer'; 

export class App extends Component { 

render() { 

return (
    <div> 
    <Header/> 
    <main> 
     <Switch> 

      <Route path="/app/dashboard" exact component={Dashboard}/> 
      <Route path="/app/money" exact component={Money}/> 
      </Switch> 
     </main> 
     <Footer/> 
     </div> 
    ); 
    } 
} 

// dashboard.jsx 
import React, {Component} from 'react'; 

export class Dashboard extends Component { 
    render() { 
    return (
     <div> 
     <h1>This is the Dashboard</h1> 
     </div> 
    ); 
    } 
} 

導航到http://localhost:3000/app/似乎工作正常，但導航到http://localhost:3000/app/dashboard給404.我可能會出錯？

PS即使在工作的路線上，添加尾部斜線也不起作用。

Answer 1

您需要在應用程序渲染結束時更正儀表板路線。 不需要另一個在那裏轉換。所以在你的App.jsx文件的渲染方法中：

render() { 
    return (
    <div> 
     ... 
     <Route path="/app/dashboard" component={Dashboard}/> 
    </div> 
); 
}