Question

只是试图让动态路由与反应路由器一起工作 - 但是当我输入url时，例如localhost：3000/5，我得到错误“不能GET / 5”。我的路由器设置如下：

balance_classes

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

中间件：

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

}

非常感谢任何意见 - 谢谢！

Answer 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'（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

中定义的组件

Answer 2

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

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

使用react-router键入url时无法访问url路由

2 个答案: