Question

我试图用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>
        );
    }
}

About.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>
        );
    }
}

Answer 1

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

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

Answer 2

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

@sapUiWarningBG

您需要将路线传递到主应用组件。

React路由器与任何路由都不匹配

2 个答案: