javascript - 路由在 Reactjs + ES6 中不起作用

Question

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

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

导出默认Base；

Main.jsx

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

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

感谢您的帮助!!

Answer 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 来渲染。 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>
    )
  }
}