当使用react-router输入url时，无法访问url路由

问题描述：

试图获得动态路由与反应路由器一起工作 - 但是当我在例如localhost：3000/5中键入url时，出现错误“can not GET/5“。我的路由器设置如下：当使用react-router输入url时，无法访问url路由

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');

任何投入是很大的赞赏 - 谢谢！

答

正如我所见，5没有定义。此错误是由于此路线未在Router中声明。这是proccess：

尝试例如.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'（该proyect的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，（即''，我不幸遇到同样的错误 – TigerBalm

试图将你的文件（在第一行）：从'./your_route/profile.jsx'导入配置文件; – JuMoGar

我已经有了我的代码 - 我离开我的所有导入也保持短代码片段:) – TigerBalm

答

原来我Express服务器没有配置为已定义的组件成为一个推送状态的服务器。在服务器中的所有路由修复问题后添加以下代码。

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

当使用react-router输入url时，无法访问url路由

相关推荐