reactjs:无法使路由器工作
我有以下index.html。我正在尝试使用路由器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Twitter API</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.2.2/react-router-dom.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Module extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<p>This is Module</p>
</div>
);
}
}
class Basic extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<ReactRouterDOM.Router>
<ReactRouterDOM.Route exact path="/" component={Module} />
</ReactRouterDOM.Router>
)
}
}
ReactDOM.render(
<Basic />,
document.getElementById('root')
);
</script>
</body>
</html>
我得到了以下错误：如何克服这一点
Uncaught TypeError: Cannot read property 'location' of undefined
at new n (react-router-dom.min.js:1)
at react-dom.js:4749
at measureLifeCyclePerf (react-dom.js:4529)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (react-dom.js:4748)
at ReactCompositeComponentWrapper._constructComponent (react-dom.js:4734)
at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4642)
at Object.mountComponent (react-dom.js:11542)
at ReactCompositeComponentWrapper.performInitialMount (react-dom.js:4825)
at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4712)
at Object.mountComponent (react-dom.js:11542)
共有1个答案
您需要使用BrowserRouter，如果您的页面不是从根目录运行的（并且您希望使用/路径），则需要设置basename属性
<ReactRouterDOM.BrowserRouter basename="/~user/">
<ReactRouterDOM.Route exact path="/" component={Module} />
</ReactRouterDOM.BrowserRouter>
-
我一直在致力于将我们的应用程序从React.js 0.13升级到15.4.2以及与之相关的依赖项。我可能很接近，但经过4天50个小时后，我终于到了终点，我最后的希望。 在升级过程中，react路由器被升级到4.0.0版，每个文档、教程和堆栈溢出问题都显示了如何编写路由器（所有这些都必须是正确的），但是，当我这样做时，它总是失败。要么说历史是必需的属性，要么当我通过示例添加它时，它仍然显示为未定义和
-
我正在组装我的第一个基于react的应用程序。我有一个工作应用程序，并已在反应路由器编织。我和巴贝尔在一起。 我在chrome的开发者控制台上得到了以下信息- 我在components/Login.js上有以下组件 在我的app.js我有以下几点- 我认为我的错误在于我导出/导入我的组件的方式，因为错误存在于另一个组件中，并且当我更改上面第一个导入的组件时，错误落在该组件上。 我尝试了各种方法，如
-
react&React-Router的新功能。我正在使用react-router-4 我有以下组件-login-home-header-sidebar-content 登录组件没有标题或侧栏。 这就是我的路由 应用程序JS 然后在我的Home组件中，我有侧边栏和内容。 home.js呈现方法 侧边栏组件有一个链接，该链接具有“to”值“/home/dashboard”。 不幸的是，这并不奏效。单击
-
问题内容： 我正在尝试使用ReactJS创建一个简单的Webapp，我想使用React-Bootstrap提供的。 我创建了一个文件，其中包含一个类，用于将和和路由与文件分开。但是，这两个部分似乎都不起作用。当我加载页面时，它只是空的，没有导航栏。谁能发现一个错误？ Navigation.js： App.js： 我尝试使用已经包含的from ，这导致了相同的结果。 为了完整性，Page.js： 问
-
我想在单击登录页中的按钮后重定向到主页。但是，当我单击地址栏中的按钮时，主页的路径会显示出来（它重定向到主页）…但它不会呈现与该路径相关的组件。它仍然显示带有主页地址的登录页。因此，我必须刷新页面才能呈现主页。这里有什么问题？？？ 在我的登录页面中…这是我用于单击按钮的功能。。 在我的索引，js页面...