react-router没有渲染任何东西

  • Z时代
  • 2024-01-10
  • 分类：问答

我创建了我的应用，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')
);

  • 不用担心发生的Home, Login, Register事情index.js。他们很好。

难道我做错了什么？需要你的帮助。永远谢谢

回答：

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

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

您现在可以将任何组件作为Router的子代（必须是单个节点）。

与常规RR2-3的主要区别在于，现在每个路由都是一个简单的组件，您可以将其与其他组件一起使用。

您不再拥有IndexRoute，只需按所需的顺序放置路由即可：

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

在Route的选项，Switch，Redirect和其他非常有用的组件的选择中，需要了解的东西不只两件事。因为它是一个非常好的版本，所以请花一些时间在一些好的文档上，并且它会停留一段时间。

如果您可以看一下这个精彩的介绍：https : //egghead.io/courses/add-routing-to-react-apps-

using-react-router-v4

和文档网站：https :

//reacttraining.com/react-router/

以上是 react-router没有渲染任何东西 的全部内容， 来源链接： utcz.com/qa/414336.html

回到顶部