路由在 Reactjs + ES6 中不起作用

Question

当我点击 link "cake" 时出现路径不匹配或服务器无法找到的错误。

这是我的 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;

导航组件 - 处理导航 links

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>
        )
    }
}

导出默认基础；

Main.jsx

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

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

感谢帮助！！

Answer 1

您不需要 /cake 中的 /，它已经在 / 中。这样做：

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

Answer 2

尝试以下方法，不确定是否有帮助。 1. 使用

   var ContentList = React.createClass({})

而不是

    class ContentList extends React.Component.

2。删除路由路径中 'cake' 之前的 /。

尝试使用

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

和你更新的代码而不是 let

希望对您有所帮助

Answer 3

它可以与 hashHistory 一起使用吗？

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

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

希望对您有所帮助。

Answer 4

你的 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 :

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

您需要在某处渲染路线。

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

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>
    )
  }
}

路由在 Reactjs + ES6 中不起作用

Routing is not working in Reactjs + ES6

javascript

reactjs

react-jsx

react-router

react-routing

导出默认基础；