0

当我单击链接“蛋糕”时，出现路径不匹配或服务器无法找到的错误。

这是我的 3 个文件的代码 - 路由器、导航和细节组件

Routers.js- 处理路由的组件

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route , HashHistory , IndexRoute , useRouterHistory} from 'react-router';
import History from 'history';
import {CreateHashHistory} from 'history';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { browserHistory } from 'react-router';

import Base from './Base.jsx';
import ListDetail from './ListDetail.jsx';

let Routes = 

        <Router history={browserHistory}>
            <Route path="/" component={Base} >
                <Route path="/cake" component= {ListDetail}></Route>

            </Route>
        </Router>

 export default Routes;

导航组件 - 处理导航链接

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';


class ContentList extends React.Component {
    render(){
        return(
            <div id="innercontent">
            <h2>What you love?</h2>
            <ul >
                <Link to={'/cake'}>Cakes</Link>
                <Link to={'/icecream'}>icecream</Link>
                <Link to={'/browin'}>browin</Link>
            </ul>
            </div>
        )
    }
}

export default ContentList;

详细信息组件 - 要显示的详细信息页面

import React from 'react';

import ReactDOM from 'react-dom';

class ListDetail extends React.Component {
    render(){
        return(
            <div>
            <h1>hi Details</h1>


            </div>
        )
    }
}


export default ListDetail;

Base.JSX

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './header.jsx';
import Footer from './footer.jsx';
import ContentList from './contentList.jsx';
import FormElement from './form.jsx';
import ListDetail from './ListDetail.jsx';

class Base extends React.Component {
    render(){
        return(
            <div>
            <Header name="My Recipe Book"/>
            <section id="content">
            <FormElement />
             <ContentList />
            </section>
            <Footer />
            <ListDetail />
            </div>
        )
    }
}

导出默认基础；

主要的.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './router.jsx';

ReactDOM.render(Routes, document.getElementById('app'));

谢谢您的帮助！！

4

4 回答 4

1

您不需要 / in /cake，它已经在/. 像这样做：

<Route path="cake" component={ListDetail} />
于 2016-08-18T06:10:33.060 回答
1

你的 base.jsx 文件的渲染函数应该是这样的：

render(){
    return(
        <div>
        <Header name="My Recipe Book"/>
        <section id="content">
        <FormElement />
        <ContentList />
         {this.props.children}
        </section>
        <Footer />
        </div>
    )
}

路线应该是

<Route path="cake" component= {ListDetail} />

和链接：

<Link to="cake">Cakes</Link>

您需要在某处渲染路线。

...当路由匹配 URL 时要呈现的单个组件。它可以由带有 this.props.children 的父路由组件渲染。读这个。

const routes = (
  <Route path="/" component={App}>
    <Route path="groups" component={Groups} />
    <Route path="users" component={Users} />
  </Route>
)

class App extends React.Component {
  render () {
    return (
      <div>
        {/* this will be either <Users> or <Groups> */}
        {this.props.children}
      </div>
    )
  }
}
于 2016-08-18T12:51:42.140 回答
0

它适用于 hashHistory 吗？

要使用 browserHistory，您需要设置服务器端渲染。

这是帮助我理解并使用 browserHistory 和服务器端渲染设置 react-router 的教程（尤其是第 11 和 13 课）： https ://github.com/reactjs/react-router-tutorial/tree/master/lessons/

希望能帮助到你。

于 2016-08-18T08:41:18.583 回答
0

试试下面的，不知道有没有用。1.使用

   var ContentList = React.createClass({})

代替

    class ContentList extends React.Component.

2. 删除路线路径中“蛋糕”之前的 /。

  1. 尝试使用

     var Routes = React.createClass({
  render: function() {
   return (
    <div>
        <Router history={browserHistory}>

和你更新的代码而不是让

希望能帮助到你

于 2016-08-18T06:18:43.033 回答