Question

我使用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事。他们非常好。

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

Answer 1

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

Answer 2

如果你正在使用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/

react-router没有渲染任何东西

2 个答案: