react-router-dom，react路由router dom4.0报错

来源：蜘蛛抓取(WebSpider) 时间：2018-04-23 09:40 标签： react router dom
用户名/邮箱/手机在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, hashHistory } from 'react-router-dom';
import PCIndex from "./components/pc_index";
import PCMyMusic from "./components/pc_my_music";
export default class Root extends React.Component{
&Router history={hashHistory}&
&Route path="/" component={PCIndex}/&
&Route path="/myMusic" component={PCMyMusic}/&
* 在页面中渲染所有组件
ReactDOM.render(
document.getElementById("mainContent")
这是代码，根据官方文档写的，但是运行之后报错，错误截图如下：
我想知道这是为什么？在线等。。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&Router&&/Router&下面只能有一个子元素，你可以用&div&&/div&包装一下
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
4.0的api有变动，你这是原来的demo。要不退版本到2.8.1.要不看新的文档；比如hashHistory在4.0里已经是HashHistory了，你这样是找不到的。可以看看这个地址
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。react-router-dom，路由4.0报错_百度知道
react-router-dom，路由4.0报错
我有更好的答案
prompt、memoryrouter、redirectprops这几个参数项设置好了么
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。react router 4.0以上的路由应用详解
转载 & & 作者：猫不白
本篇文章主要介绍了react router 4.0以上的路由应用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了react router 4.0以上的路由应用，分享给大家，具体如下：
在4.0以下的react router中，嵌套的路由可以放在一个router标签中，形式如下,嵌套的路由也直接放在一起。
&Route component={App}&
&Route path="groups" components={Groups} /&
&Route path="users" components={Users}&
&Route path="users/:userId" component={Profile} /&
但是在4.0以后，嵌套的路由与之前的就完全不同了，需要单独放置在嵌套的根component中去处理路由，否则会一直有warning:
You should not use &Route component& and &Route children& in the same route
正确形式如下
&Route component={App}&
&Route path="groups" components={Groups} /&
&Route path="users" components={Users}&
//&Route path="users/:userId" component={Profile} /&
上面将嵌套的路由注释掉
const Users = ({ match }) =& (
&h2&Topics&/h2&
&Route path={`${match.url}/:userId`} component={Profile}/&
上面在需要嵌套路由的component中添加新的路由
一个完整的嵌套路由的例子如下
说明及注意事项
1.以下代码采用ES6格式
2.react-router-dom版本为4.1.1
3.请注意使用诸如HashRouter之类的history，否则一直会有warning，不能渲染
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// import { Router, Route, Link, Switch } from 'react-router';
HashRouter,
} from 'react-router-dom';
class App extends Component {
render() {
&h1&App&/h1&
&li&&Link to="/"&Home&/Link&&/li&
&li&&Link to="/about"&About&/Link&&/li&
&li&&Link to="/inbox"&Inbox&/Link&&/li&
{this.props.children}
const About = () =& (
&h3&About&/h3&
const Home = () =& (
&h3&Home&/h3&
const Message = ({ match }) =& (
&h3&new messages&/h3&
&h3&{match.params.id}&/h3&
const Inbox = ({ match }) =& (
&h2&Topics&/h2&
&Route path={`${match.url}/messages/:id`} component={Message}/&
ReactDOM.render(
(&HashRouter&
&Route exact path="/" component={Home} /&
&Route path="/about" component={About} /&
&Route path="/inbox" component={Inbox} /&
&/HashRouter&),
document.getElementById('root')
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具

我要回帖

更多关于 react router dom 的文章

 

随机推荐