Problem mit Reagieren mit Router-Router

Question

Ich habe 3 Hauptkomponenten.

diese Komponente die ganze app

import React,{Component} from 'react'; 

import IndexContent from './components/indexContent'; 
import IndexHome from './components/IndexHome'; 
import Root from './components/root'; 

import {BrowserRouter as Router, Match, Miss} from 'react-router'; 


    class Home extends Component{ 

    return(
      <Router> 
        <div> 
         <Root /> 
         <Match exactly pattern='/' component={IndexContent}/> 
         <Match pattern="/indexhome" component={IndexHome}/> 
        </div> 
      </Router> 
     ) 

}; 

export default Home; 

In dieser Komponente machen ich die navBar und die Fußzeile haben und in den {this.props.children} Ich möchte, dass die angeklickt Komponente gerendert wird.

import React,{Component} from 'react'; 

import NavBar from './NavBar'; 
import Footer from './footer'; 

class Root extends Component{ 
    render:function(){ 
     return(
       <div> 
        <NavBar/> 
        {this.props.children} 
        <Footer/> 
       </div> 
     ) 
    } 
}; 

export default Root; 

Und ich habe eine andere Komponente mit einem Link

import { Link } from 'react-router'; 
<Link to="/indexhome">Join In</Link> 

ich für eine Woche versuchen, jetzt ist es die Arbeit. Ich verstehe, dass es diese neue Version von "React-Router" gibt und die Syntax könnte ein Problem sein.

Was mache ich falsch, wenn ich nur will, dass die Indexseite standardmäßig {IndexContent} ist und beim Klicken auf den Link das {IndexHome} gerendert wird?

der {Start} ist ein Weg, navBar und Fußzeilen lassen

Answer 1

Sie verwenden eine alte Alpha in allen Seiten identisch seine Version von Router React. Sowohl Match als auch Miss sind keine Komponenten mehr. Außerdem müssen Sie von react-router-dom importieren, nicht react-router. Es gibt viele Beispiele auf der documentation page, die ich Ihnen empfehlen, einen Blick auf. Installieren Sie die neueste Version von Router reagieren und hier ist ein Code für den Einstieg,

<Router> 
    <div> 
    <Root /> 
    <Route exactly pattern='/' component={IndexContent}/> 
    <Route pattern="/indexhome" component={IndexHome}/> 
    </div> 
</Router> 

Answer 2

Wenn dies ist, was Sie achive versuchen:

hier ist eine sehr abstrakte und einfaches Beispiel (Sie können sich ändern und lassen Sie die Verwendung von redux Anbieter, wenn Sie nicht redux verwenden):
diesem Einspeisepunkt berücksichtigen:

// index.js - this is your entry point 

import React from 'react'; 
import { Route, IndexRoute } from 'react-router'; 
import { Provider } from 'react-redux'; 

import App from 'path/to/component'; 
import HomePage from 'path/to/component'; 
import AboutPage from 'path/to/component'; 
import NotFoundPage from 'path/to/component'; 
//... 
    render( 
    <Provider store={store} > 
     <Router routes={ 
     <Route path="/" component={App}> 
      <IndexRoute component={HomePage} /> 
      <Route path="/home" component={HomePage} /> 
      <Route path="/about" component={AboutPage} /> 
      <Route path="*" component={NotFoundPage} /> 
     </Route> 
     } /> 
    </Provider>, document.getElementById('app') 
); 

merken, wie wir 1 „main“ Route, die die App Komponente verweisen, und es hat "kind routes", die auf andere Komponenten basierend auf der path verweisen, die wir natürlich definieren. In diesem Sinne besteht einer der Jobs von react-router darin, die "untergeordneten Komponenten" an die übergeordnete Komponente App weiterzuleiten, wiederum basierend auf dem bereitgestellten URL -> Pfad. es tut das über props.children.
Jetzt können Sie die untergeordneten Komponenten beliebig auf Ihrer Komponente App platzieren oder weiter unten übergeben.
In diesem Beispiel sind wir machen eine Header Komponente, eine child Komponente, die wir von react-router und schließlich eine Footer Komponente bekam:

// App.js 

import React from 'react'; 
import Header from 'path/to/component'; 
import Footer from 'path/to/component'; 
//... 
class App extends React.Component { 
    render() { 
     return (
      <div> 
       <Header /> 

       {this.props.children /* here are the children that react-router will pass down */} 
       <Footer /> 
      </div> 
     ); 
    } 
} 

export default App; 

Auf diese Weise nur die props.children werden auf jeder Strecke Änderung wieder zu machen, Lassen die App, Header und Footer bleiben "statisch". Natürlich liegt das Styling bei Ihnen, und die Namen der Komponenten sind nur für dieses Beispiel.
Bitte beachten Sie - das ist für reagieren-Router v3.0.0