react-router.min.js：1未捕获的TypeError：无法读取属性＆＃39; location＆＃39;未定义的

Question

＆＃13;

＆＃13;

 
 <!-- Included Script --> 
 <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
 <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
 <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 <script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
  
    
	<div id="root"></div>
	
    <script type="text/babel">	
		
		var Router = ReactRouter.Router;
        var Route = ReactRouter.Route;
        var IndexRoute = ReactRouter.IndexRoute;
        var Link = ReactRouter.Link;
        var browserHistory = ReactRouter.browserHistory;

        class Page extends React.Component {
          
            render() {
                return (
                     <div>
                         <Link to='/about'>India </Link>
                     </div>
                );
            }
        }

        class About extends React.Component {
          
            render() {
                return (
                        <div>
                            to Router
                        </div>
                );
            }
        }

        class NoMatch extends React.Component {
          
            render() {
                return (
                        <div>
                           No page found
                        </div>
                );
            }
        }

        ReactDOM.render(
            <Router>
                <Route path="/" component={Page}>
                    <Route path="about" component={About}/>
                    <Route path="*" component={NoMatch}/>
                </Route>
            </Router>,
            document.getElementById('root')
        );

    </script>
   

＆＃13;

＆＃13;

＆＃13;

它总是给我＆＃39; location＆＃39;未定义的错误。在其他帖子中尝试过更简洁的答案，但它仍然不适合我。

任何人都可以帮我解决这个问题吗？

提前致谢。

Answer 1

阵营路由器-DOM

使用react-router-dom（React Router的DOM绑定）

安装

<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

使用

只需使用ReactRouterDOM代替ReactRouter：

var Router = ReactRouterDOM.BrowserRouter;
var Route = ReactRouterDOM.Route;
var Link = ReactRouterDOM.Link;

  

您可以在window.ReactRouterDOM找到该库。

github/react-router-dom

基本示例

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

https://reacttraining.com/react-router/web/api/Route

Answer 2

我想你忘了把历史=＆＃34; browserHistory＆＃34;在ReactDom下的Router标签中。     {{1}}

Answer 3

你说你在评论中使用了v4 ......所以有几件事情立即脱颖而出是这种类型的信息对于获得正确答案非常重要。

如文档中所述，您的<App/>需要包裹在路由器对象周围。

https://reacttraining.com/react-router/web/api/Router

<Router>
    <App/>
</Router>

如果您使用的是v4，则不需要传递历史记录...例如，<Router history={...}，这是为您处理的。您只需要安装历史记录包...所以在您的情况下找到它的CDN。

您应在<Switch/>内放置多条路线。

https://reacttraining.com/react-router/web/api/Switch

<Switch>
    <Route/>
    <Route/>
    ...
</Switch>

这就是v4或多或少决定选择哪条路由的方式，类似于运行switch语句。

从那开始或考虑v3 cdn。

您应该花时间仔细阅读本文档。 React Router团队拥有非凡的文档，易于遵循并实施到玩具项目以及生产就绪的Redux或Relay应用程序中。

https://reacttraining.com/react-router/web/guides/philosophy