我使用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
事。他们非常好。我做错了吗?需要你的帮助。永远感谢。
答案 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