react-router没有渲染任何东西

时间:2017-05-10 05:28:44

标签: javascript reactjs react-router create-react-app

我使用Exception创建了我的应用,并试图在其上使用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事。他们非常好。

我做错了吗?需要你的帮助。永远感谢。

2 个答案:

答案 0 :(得分:3)

如果你是反应路由器的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>

答案 1 :(得分:0)

如果你正在使用React Router 4,正如其他评论所说,你必须使用&#39; react-router-dom&#39;以便在您的组件中导入它。

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>

在Route的选项,使用Switch,Redirect和其他非常有用的组件方面,还有很多东西需要理解。尝试花一些时间在一些好的文档上,因为它是一个非常好的版本,它会坚持一段时间。

如果你能看一下这个精彩的介绍:https://egghead.io/courses/add-routing-to-react-apps-using-react-router-v4

和doc网站:https://reacttraining.com/react-router/