reactjs：无法使路由器工作
Posted
技术标签:
【中文标题】reactjs：无法使路由器工作【英文标题】：reactjs: not able to make router work 【发布时间】：2018-09-07 02:17:30 【问题描述】：我有以下 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)
【问题讨论】：
***.com/questions/42892488/… 阅读该答案。我认为它会帮助您解决问题。 好的。现在我正在使用它：ReactRouterDOM.BrowserRouter。但我目前正在使用localhost/~user/index.html。现在它什么也没显示。 我看不到您为 /user 定义了路由的任何地方，只是根路由“/”。尝试去 localhost:port 我的意思是我的文件 index.html 位于 /home/public_html。我正在使用 apache 网络服务器为页面提供服务。所以localhost/~user/index.html 【参考方案1】：您需要使用BrowserRouter，并且如果您的页面不是从根目录运行，则需要设置basename 属性（并且您想使用/ 路径）
<ReactRouterDOM.BrowserRouter basename="/~user/">
<ReactRouterDOM.Route exact path="/" component=Module />
</ReactRouterDOM.BrowserRouter>
【讨论】：
现在可以了。但问题是我正在从 apache 网络服务器提供 index.html。那么我该如何结合反应路由器和apache url @SanthoshYedidi 您需要为此设置basename。更新答案
正如我所提到的，还有许多其他文件（.php 文件）从“/~user/”提供服务，我希望localhost/~user/index.html 成为基础，所有 url 都从那里开始。就像我有 basename 所做的。它只影响反应BrowserRouter。
那么基本名称应该是“/~user/index.html”以上是关于reactjs：无法使路由器工作的主要内容，如果未能解决你的问题，请参考以下文章