javascript - react-router 没有渲染任何东西

Question

我使用 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;

我的 App.js。

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

• 不用担心 index.js 上的Home、Login、Register 事情。它们非常好。

我做错了什么吗？

Answer 1

如果你是 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'));

注意:不要忘记将路由包装在包装器中，否则会抛出错误!

要设置 404 页面，只需提供另一条没有任何路径的路由。如果找不到路由，它将被渲染。

<Route component={FourOhFour} /> /* FourOhFour component as 404*/

** 奖励积分如果你是 react-router 的新手，你可能会遇到同时渲染多条路由的问题。但是您一次只想渲染一条路线。在这一点上。

/*Import Switch also*/
import {BrowserRouter, Route, Switch} from 'react-router-dom';

然后

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