Question

您好我的路线工作有问题。

这是我的route.js

import React, { Component } from 'react';
import Home from './Home';
import Add from './Add';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
       export default (


<Router  history={browserHistory}>
  <IndexRoute component={Home}/>
      <Route path='/' component={Home} />
      <Route path='/add/' component={Add} />
      </Router>
      );

这是App.js

import React, { Component } from 'react';
import routes from './route';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'

class App extends Component {
  constructor(props) {
    super(props);

  }


  render() {
    return (
<Router history={hashHistory}>{routes}</Router>
      );
  }
}

export default App;

这是Add.js

    import React, { Component } from 'react';
import Header from './Views/Header';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'


import './styles/App.css';
import './styles/layout.css';

class Add extends Component {
    constructor(props) {
        super(props);

    }

    render() {
        return (
      <div className=" ">
       <Header />
            <h2> Add a cake </h2>
      </div>
            );
    }
}

export default Add;

我没有添加Home.js，因为Home工作正常。

但是当我点击“/ add”网址指向“http://localhost:3000/add#/”但没有任何反应时。

你能帮忙吗？

由于

Answer 1

问题是您在App.js中的路由器中使用路由器，一个使用hashHistory，另一个使用browserHistory。

将您的路线更改为

import React, { Component } from 'react';
import Home from './Home';
import Add from './Add';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
export default (
    <Router  history={browserHistory}>
        <IndexRoute component={Home}/>
        <Route path='/' component={Home} />
        <Route path='/add' component={Add} />
      </Router>
      );

和app.js到

import React, { Component } from 'react';
import routes from './route';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'

class App extends Component {
  constructor(props) {
    super(props);

  }


  render() {
    return (
         <div>{routes}</div>
      );
  }
}

export default App;

反应路由器问题

1 个答案: