Question

我正在学习反应。在我的index.js文件中，我有以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
import Users from './components/Users.jsx';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

ReactDOM.render((
        <Router history={browserHistory}>
            <Route path="/" component={App} />
            <Route path="/users" component={Users} />
        </Router>
    ), document.getElementById('root')
);

第一条路线是

<Route path="/" component={App} />

有效，但第二条路线

<Route path="/users" component={Users} />

不起作用。我得到了'无法获取/用户错误。

Answer 1

我建议您做的是拥有一个父布局组件，然后将您的路由作为该父组件的子路由

说你的父组件就像

export default class Layout extends React.Component {

    render() {
        return (
            <div>{this.props.children}</div>
        )
    }
}

现在你可以拥有像

这样的路线

import Users from './components/Users.jsx';
import Layout from './components/Layout.jsx';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

ReactDOM.render((
        <Router history={browserHistory}>
            <Route path="/" component={Layout} >
               <IndexRoute component={App}/>
               <Route path="/users" component={Users} />

        </Router>
    ), document.getElementById('root')
);

此外，由于您使用的是browserHistory，如果您尝试使用该网址直接访问它，则会出现错误

要在您的网络包webpack添加historyApiFallback: true

中解决此问题

Answer 2

似乎问题是路由未在服务器端处理。

您可以在服务器上执行以下操作：

app.get('*', function (request, response){
    response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

我的反应路由器在某些路由上不起作用

2 个答案: