路由在Reactjs + ES6中不起作用

Question

When I am clicking on the link "cake" I am getting the error the path is not matched or server is not able to find.

Here is my code for 3 files - Router, Navigation and detail components

Routers.js- component handling the routing

---

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;

---

Navigation components - handling the navigaton 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;

---

Detail Component - Detail page to display

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

export default Base;

Main.jsx

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

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

Thanks for the help!!

Answer 1

You don't need the / in /cake , it's already under / . Do it like this:

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

Answer 2

The render function of your base.jsx file should be something like this :

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

Route should be

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

And the link :

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

You need to render the routes somewhere.

...A single component to be rendered when the route matches the URL. It can be rendered by the parent route component with 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>
    )
  }
}

Answer 3

Try the following, not sure if it would help. 1. Use

   var ContentList = React.createClass({}) 

instead of

    class ContentList extends React.Component.

2. remove the / before 'cake' in your route path.

3. try using

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

and your updated code instead of let

hope it helps

Answer 4

Does it work with hashHistory ?

To use browserHistory, you need to set up server side rendering.

Here is the tutorial (especially lesson 11 and 13) which helped me understand and set up react-router using browserHistory and server side rendering: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/

Hope it helps.