使用 react-router 输入 url 时无法访问 url 路由答案

【问题标题】：Unable to access url route when typing in url using react-router使用 react-router 输入 url 时无法访问 url 路由
【发布时间】：2017-04-19 23:11:39
【问题描述】：

只是试图让动态路由与反应路由器一起使用 - 但是当我输入 url 时，例如 localhost:3000/5，我收到错误“无法获取 /5”。我的路由器设置如下：

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <ConnectedRouter history={history}>
                    <div>
                        <Route exact path="/" component={Home} />
                        <Route path="/:id" component={Profile} />
                    </div>
                </ConnectedRouter>
            </Provider>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

下面是我的服务器和服务器中间件：

中间件：

module.exports = app => {
app.use(webpackHotMiddleware(compiler, {
    log: console.log
}))

app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
    stats: {colors: true}
}))

app.use(morgan('dev'))
app.use(express.static('dist'));
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

}

服务器：

require('./middleware')(app);
const people = [];

app.on('listening', () => {
    controllers.getPeopleData(people);
});

app.get('/people', (req, res) => {
    const sortedPeople = controllers.alphabetizePeople(people);
    res.json(sortedPeople);
})

app.use(function(err, req, res, next) {
  if (err) {
    res.status(500).send(err);
    console.log(err.message);
  }
  next();
});

app.listen(3000, () => {
    app.emit('listening');
});
console.log('listening on 3000');

非常感谢任何输入 - 谢谢！

【问题讨论】：

标签： javascript node.js reactjs express react-router

【解决方案1】：

如我所见，5 没有定义。此错误是由于此路由未在 Router 中声明。就是这个过程：

尝试在一个 .jsx 中例如：indexRoutes.jsx：

import { Router, Route, browserHistory} from 'react-router';

import page5 from './your_route/5.jsx';

export default class Routes extends React.Component {
    constructor() {
         super()
    }

    render() {
        return (
            <Router history={browserHistory}>                
                 <Route path="/5" component={page5}/> 
            </Router>
         );
    }

完成后，在您的“index.js”（项目的 js 根目录）中输入：

import React from 'react';
import ReactDOM from 'react-dom';

import IndexRoutes from './routes/IndexRoutes.jsx'; //this route could be diffentent. Make sure you put the correct.

// Render the main component into the dom
ReactDOM.render(<IndexRoutes/>, document.getElementById('idRoot'));

现在，当您在浏览器中输入localhost:3000/5 时，您将看到您在./your_route/5.jsx 中定义的组件

【讨论】：

感谢您的回复！ /:id 不应该允许我去任何一个数字的路线吗？那是我的目标，但即便如此，如果我将 :/id 更改为 5，（即 <Route path="/5" component={Profile} /> 不幸的是，我也会遇到同样的错误
尝试在你的文件中（在第一行）输入这个：import Profile from './your_route/profile.jsx';
我的代码中已经有这个了 - 我把所有的导入都去掉了，保持代码 sn-p 简短:)

【解决方案2】：

原来我的 express 服务器没有配置为 pushstate 服务器。在服务器中的所有路由修复问题后添加以下代码。

app.get('*', function(request, response){
  response.sendfile('./dist/index.html');
});

【讨论】：