React Router 只识别索引路由 [英] React Router only recognises index route

问题描述

我有 2 条路线，/ 和 /about，我还测试了更多路线.所有路由只渲染 / 的 home 组件.

当我尝试一条不存在的路线时，它会识别出该路线并显示警告警告:没有路由匹配路径/example".确保你有 <Route path="/example">在你的路线中的某个地方

App.js

从'react'导入React；从反应路由器"导入路由器；import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';从 './components/Main' 导入 {Home, About};让路线 = (<Route name="home" path="/" handler={Home} ><Route name="about" handler={About}/></路线>);Router.run(路由，功能(处理程序){React.render(, document.body);});

./components/Main

从'react'导入React；var Home = React.createClass({使成为() {返回 
这是主要组件</div>}});var About = React.createClass({使成为(){return <div>这是关于</div>}});导出默认{首页,关于};

我已经尝试添加一个明确的路径，但无济于事.<Route name="about" path="/about" handler={About}/>

我偶然发现了这个 stackoverflow Q 但没有发现答案中的救赎.

谁能解释一下可能是什么问题?

解决方案

既然你在 Home 下嵌套了 About 你需要渲染一个 <RouteHandler/> 组件位于 Home 组件中，以便 React Router 能够显示您的路由组件.

import {RouteHandler} from 'react-router';var Home = React.createClass({使成为() {return (<div> 这是主要的组件<RouteHandler/>

);}});

I have 2 routes, / and /about and i've tested with several more. All routes only render the home component which is /.

When I try a route that doesn't exist it recognises that fine and displays the warning Warning: No route matches path "/example". Make sure you have <Route path="/example"> somewhere in your routes

App.js

import React from 'react';
import Router from 'react-router';
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';
import {Home, About} from './components/Main';

let routes = (
    <Route name="home" path="/" handler={Home} >
        <Route name="about" handler={About} />
    </Route>
);

Router.run(routes, function (Handler) {  
  React.render(<Handler/>, document.body);
});

./components/Main

import React from 'react';

var Home = React.createClass({
    render() {
        return <div> this is the main component </div>
    }
});

var About = React.createClass({
    render(){
        return <div>This is the about</div>
    }
});

export default {
    Home,About
};

I've tried adding an explicit path to about to no avail. <Route name="about" path="/about" handler={About} />

I've stumbled upon this stackoverflow Q but found no salvation in its answer.

Can anyone shed some light on what might be the problem?

解决方案

Since you've nested About under Home you need to render a <RouteHandler /> component within your Home component in order for React Router to be able to display your route components.

import {RouteHandler} from 'react-router';

var Home = React.createClass({
    render() {
        return (<div> this is the main component
            <RouteHandler />
        </div>);
    }
});

这篇关于React Router 只识别索引路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！