使用 react-router 做出反应的问题答案

【问题标题】：Issue with react using react-router使用 react-router 做出反应的问题
【发布时间】：2017-08-30 02:39:40
【问题描述】：

我有 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} 是一种让导航栏和页脚出现在所有页面中的方法

【问题讨论】：

问你两个问题：1.你用的是什么版本的react-router？ 2. 你只想要一个nav-bar 来渲染路由器提供的组件，而不需要重新渲染“布局”（你的Root 组件）？
嗨，1. 使用 react-router 版本 4.0.0 2. 不，我想让 {IndexContent} 成为主页（您看到的第一页）和点击链接标签时（在第三个组件）将呈现 {IndexHome}。如果可能的话，我希望 {Root} 处理渲染，以便 {Footer} 和 {NavBar} 将保留在所有页面中。
这样的？ imgur.com/C0je8Sa
是的，正是..

标签： reactjs react-native react-router

【解决方案1】：

您使用的是旧的 alpha 版本的 React Router。 Match 和 Miss 都不再是组件。此外，您需要从react-router-dom 导入，而不是react-router。 documentation page 上有很多例子，我建议你看看。安装最新版本的 React Router，这里有一些代码可以帮助您入门，

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

【讨论】：

【解决方案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 个“主”路由引用 App 组件，并且它有“子路由”引用基于我们定义的 path 的其他组件。考虑到这一点，react-router 的工作之一是将“子组件”传递给父App 组件，同样基于提供的 url -> 路径。它通过props.children 做到这一点。
现在，您可以将子组件放置在 App 组件上的任意位置，或者将它们向下传递。
在这个例子中，我们渲染了一个Header 组件，一个从react-router 得到的child 组件，最后是一个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 保持“静态”。当然样式由您决定，组件的名称只是为了这个示例。
请注意 - 这与 react-router v3.0.0 相关

【讨论】：