Javascript react路由器没有渲染任何内容

我用

create-react-app

创建了我的应用程序，并尝试在上面使用

react-router

。但它根本不起作用

这是我的

Header.js

  import React, { Component } from 'react';

class Header extends Component {
    render() {
        return (
          <nav>
                <div className="nav-wrapper blue darken-1">
                    <a className="brand-logo center">Testing</a>

                    <div className="right">
                        <ul>
                            <li>
                                <a><i className="material-icons">vpn_key</i></a>
                            </li>
                            <li>
                                <a><i className="material-icons">lock_open</i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        );
    }
}

export default Header;

import React, { Component } from 'react';
import Header from './Header';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="Header">
        <Header />
        {this.props.children}
        </div>
      </div>
    );
  }
};

export default App;

这里是我的

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import App from './App';
import Home from './Home';
import Login from './Login';
import Register from './Register';

ReactDOM.render((
  <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home}/>
            <Route path="/home" component={Home}/>
            <Route path="/login" component={Login}/>
            <Route path="/register" component={Register}/>
        </Route>
    </Router>),
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{Router，Route，browserHistory，IndexRoute}；
从“./App”导入应用程序；
从“./主页”导入主页；
从“./Login”导入登录名；
从“./寄存器”导入寄存器；
ReactDOM.render((
),
document.getElementById（'root'））
);

• 不要担心

  主页、登录、注册
  在
  index.js
  上的事情。它们非常好

---

我做错什么了吗？我需要你的帮助。始终感谢。

如果您是react router的v4*版，它将无法正常工作。您应该安装react router dom并导入它

我就是这样做的

import {BrowserRouter, Route} from 'react-router-dom';


//modified code of yours
ReactDOM.render((
     <BrowserRouter>
       <div>
         <Route path="/" component={App}>
           <IndexRoute component={Home}/>
           <Route path="/home" component={Home}/>
           <Route path="/login" component={Login}/>
           <Route path="/register" component={Register}/>
         </Route>
      </div>
    </BrowserRouter>),
    document.getElementById('root'));

然后

/*使用'Switch'组件包装您的路线*/

如其他评论所述，如果您使用的是React Router 4，则必须使用“React Router dom”才能将其导入组件中

import { BrowserRouter as Router } from 'react-router-dom'

您现在可以将任何组件作为路由器的子组件（它必须是单个节点）

与普通RR2-3的主要区别在于，现在每个路由都是一个简单的组件，您可以将其与其他组件放在一起

您不再具有IndexRoute，只需按您想要的顺序放置路由：

<div>
  <Header />
  <Route path="/blabla/:bla" component={SingleBlaBla} />
  <Route path="/aboutUs" exact component={AboutUs} />
  <Route path="/" exact component={Home} />
  <Footer />
</div>

在路由选项、交换机、重定向和其他非常有用的组件的使用方面，有很多东西需要了解。试着花一些时间在一些好的文档上，因为它是一个非常好的版本，它会持续一段时间

如果你能看一下这个精彩的介绍：

---

以及doc网站：

您安装了什么版本的react路由器？v4.uhh中的语法发生了很大变化。。。它是^4.1.1。您能提供一个错误日志吗？这样这里的社区就可以在这个问题上为您提供更多帮助和指导。@kycfeel react router在v4中已完全更改，请检查

react router v4

，并用以下方式定义它：

/*Wrap your route with `Switch` component*/
<BrowserRouter>
    <div>
        <Switch>
            <IndexRoute component={Home}/>
            <Route path="/" component={App}/>
            <Route path="/home" component={Home}/>
            <Route path="/login" component={Login}/>
            <Route path="/register" component={Register}/>
         </Switch>
    </div>
</BrowserRouter>

import { BrowserRouter as Router } from 'react-router-dom'

<div>
  <Header />
  <Route path="/blabla/:bla" component={SingleBlaBla} />
  <Route path="/aboutUs" exact component={AboutUs} />
  <Route path="/" exact component={Home} />
  <Footer />
</div>