React 路由器不匹配任何路由答案

【问题标题】：React router did not match any routeReact 路由器不匹配任何路由
【发布时间】：2016-12-22 03:41:27
【问题描述】：

我试图用react-router 做一些基本的例子，但它不起作用。代码和思路都很简单：

import React, { Component } from 'react';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import App from './App';
import About from './About';
import Repos from './Repos';
// import NotMatch from './NotMatch';

export default class RouterApp extends Router {
  render() {
    return (
      <Router history={ browserHistory }>
        <Route path='/' component={ App } >
          <IndexRoute component={ Repos } />
          <Route path='about' component={ About } />
        </Route>
      </Router>
    );
  }
}

它渲染了App 组件，但任何其他路由都不起作用，例如http://localhost:8080/#/about?_k=nwt0sq，该路由抛出的是我：Location "/about" did not match any routes。

Repos 路由 (indexRoute) 也不起作用。

顺便说一句，这是index.js：

import React from 'react'
import { render } from 'react-dom'
import RouterApp from './modules/Router'

render(<RouterApp/>, document.getElementById('app'))

有什么想法吗？我正在阅读另一个问题并在谷歌上搜索，但无法解决这个问题。

这是我的组件：

App.js

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return <h1> APP </h1>;
    }
}

Repos.js

import React, { Component } from 'react';

export default class Repos extends Component {
    render() {
        return (
            <section>
                <h2>Repos</h2>
                <ul>
                    <li>Repo 1</li>
                    <li>Repo 2</li>
                    <li>Repo 3</li>
                    <li>Repo 4</li>
                </ul>
            </section>
        );
    }
}

关于.js

import React, { Component } from 'react';

export default class About extends Component {
    render() {
        return (
            <section>
                <h2>About</h2>
                <p>
                    Pariatur eum tenetur in iste maiores est architecto dignissimos. 
                    Vero non explicabo veniam quam debitis. 
                    Deleniti rerum eaque ratione provident delectus architecto veniam. 
                    Ipsum omnis dicta eum dolore ea.
                </p>
            </section>
        );
    }
}

【问题讨论】：

我可能离这里很远，但是。您的路由器正在使用推送状态历史记录（通过属性 history = {browserHistory}），但您作为示例列出的 url 使用基于哈希的路由 (/#/about)。这可能无法正常工作。如果您手动导航到您的关于页面，请尝试在没有哈希的情况下进行操作。也尝试不添加任何查询字符串参数
@PaulStoner 很奇怪，因为当我打开路径时会自动设置哈希值。编辑：我改为 hashHistory 但问题仍然存在。
那么我很抱歉。我是根据我设置的外观相似的路由器发表评论的。当手动导航到我的关于页面时，将哈希添加到路由中会导致浏览器无法转换。我去看看能不能找到别的东西

标签： javascript reactjs

【解决方案1】：

我想我弄错了，你的路线实际上并没有指定路径。你需要像这样为每条路径加上斜线：-

 render() {
    return (
      <Router history={ browserHistory }>
        <Route path='/' component={ App } >
          <IndexRoute component={ Repos } />
          <Route path='/about' component={ About } />
        </Route>
      </Router>
    );
  }

【讨论】：

据我所知，子路由中不需要尾部斜杠，顺便说一句，我试过了，得到了同样的错误：/
将路径设置为“/”的基本路由会处理这个问题。以我有限的经验，路线本身不需要前导“/”
在您的基础组件中，您是否返回子道具
你需要像这样从 App.js 返回 this.props.children ：-
render() { return(

APP
{this.props.children}
); }

【解决方案2】：

尝试如下重构您的 app.js：

export default class App extends Component {
    render() {
        return (<div> (this.props.children} </div>):
    }
}

您需要将路由传递给您的主应用组件。

【讨论】：