Question

我有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;

在这个组件中，我有navBar和页脚，在{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}是一种让navBar和页脚在所有页面中的方法

Answer 1

您正在使用旧的alpha版React Router。 Miss和react-router-dom都不再是组件。此外，您需要从react-router导入，而不是<Router> <div> <Root /> <Route exactly pattern='/' component={IndexContent}/> <Route pattern="/indexhome" component={IndexHome}/> </div> </Router>。 documentation page上有很多例子我建议你看一下。安装最新版本的React Router，这里有一些代码可以帮助您入门，

accountno

Answer 2

如果您正在努力实现这一目标：

这是一个非常抽象和简单的示例（如果您不使用redux，可以更改并省略redux提供程序的使用）：
考虑这个切入点：

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

注意我们如何拥有1＆＃34; main＆＃34;引用App组件的路由，它有＆＃34;子路由＆＃34;根据我们定义的path引用其他组件。考虑到这一点，react-router的工作之一就是传递儿童组件＆＃34;到父App组件，再次基于网址 - ＆gt;路径提供。它是通过props.children来实现的现在，您可以将子组件放在App组件上的任何位置，或者将它们向下传递在此示例中，我们正在呈现Header组件，child组件，我们从react-router获得，最后是Footer组件：

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

这样，只有props.children在每次路线更改时都会重新呈现，让App，Header和Footer保持＆＃34;静态＆＃34 ;。当然造型取决于你，组件的名称只是为了这个例子。
请注意 - 这与react-router v3.0.0

使用react-router进行反应的问题

2 个答案: