React routeur de travail non routes imbriquées de

Question

Je viens de mettre à réagir Router v4 avec une réaction 15.4.2 application basée sur un passe-partout de Fountain JS et après avoir lu this article, je l'ai écrit ceci:

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

Navigation vers http://localhost:3000/app/ semble pour bien fonctionner, mais la navigation à http://localhost:3000/app/dashboard donne 404. Que pourrais-je me tromper? PS Même sur les routes qui fonctionnent, l'ajout d'une barre oblique ne fonctionne pas.

Answer 1

Vous devez corriger l'itinéraire du tableau de bord à la fin du rendu de l'application. Pas besoin d'un autre commutateur là-bas. Donc, dans la méthode de rendu de votre fichier App.jsx:

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