Reactjs 使用react路由器时出现react问题

我有3个主要组件

此组件渲染整个应用程序

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;

在这个组件中，我有导航栏和页脚，在{this.props.children}中，我希望被单击的组件将被呈现

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;

我还有一个带链接的组件

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

我现在花了一个星期的时间让它工作。我知道有一个新版本的“react router”，语法可能有问题

如果我想要的只是默认情况下索引页是{IndexContent}，并且单击链接时{IndexHome}将被呈现，那么我做错了什么

---

{Root}是一种让导航栏和页脚出现在所有页面中的方法

您使用的是旧的alpha版本的React Router。Match和Miss不再是组件。另外，您需要从react router dom导入，而不是从react router导入。上面有很多例子，我建议你看看。安装最新版本的React Router，下面是一些代码，让您开始使用

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

---

如果这是您想要实现的目标：

下面是一个非常抽象和简单的示例，如果您不使用redux，您可以更改和省略redux provider的使用： 考虑这个入口点：

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

这样，每次路线更改时，只有props.children被重新渲染，使应用程序、页眉和页脚保持静态。 当然，样式由您决定，组件的名称仅用于本示例。

---

请注意-这与react router v3.0.0相关，有两个问题需要回答：1。您使用的是什么版本的react路由器？2.您只需要一个导航条，它将呈现路由器提供的组件，而无需重新：呈现布局您的根组件？您好，1。使用react路由器版本4.0.0 2。不，我想让{IndexContent}成为您看到的首页第一页，当单击第三个组件中的链接标记时，{IndexHome}将被呈现。如果可能的话，我想让{Root}来处理渲染，这样{Footer}和{NavBar}就可以留在所有页面中。像这样吗？是的，没错。。

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