Question

我已经实现了react-router没有任何问题，它工作正常，但出于某种原因，用户刷新页面或尝试通过路径i＆直接访问主页面的不同页面＃39;我得到的错误就像无法获取/无论什么（例如，无法获取/博客）。

以下是代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import store from 'store';

// Layouts
import App from 'layouts/app';

// Components
import Portfolio     from 'ui/portfolio';
import BlogContainer from 'ui/blog-container';
import TimeLine      from 'ui/timeline';
import About         from 'ui/about'
import Contact       from 'ui/contact'

ReactDOM.render((
  <Provider store={store}>
    <Router history={browserHistory}>

        <Route component={App}>
            <Route path="/" component={Portfolio} />
            <Route path="/blog" component={BlogContainer} />
            <Route path="/timeline" component={TimeLine} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} />
        </Route>

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

我知道如何解决它。

Note: dependencies I am using
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-redux": "^4.0.6",
    "react-router": "^2.0.0",
    "redux": "^3.3.1"

Answer 1

问题是你的服务器路由器（nginx，Apache ......）不知道要返回什么以及要向浏览器提供什么内容。基本上，如果你的应用程序只是你已经捆绑的前端应用程序，承认你正在使用nginx，你需要为你的服务器配置这种配置：

server {

    location / {
        try_files $uri /your/index.html; # the path to your html page
    }
}

然后，当您尝试直接转到某个路线时，您的服务器将始终返回包含您的javascript包的html页面，而react-router应该处理其余部分。

请参阅react-router

文档中的this explanation

Answer 2

删除＆＃39; /＆＃39;从你的路线。直接调用组件。例如： {

<Route component={ App } path='/master'>
        <Route path = 'board' component={BoardView} />
        <Route  path = 'team'  component={View} />
        <Route path = 'all' component={All} />
        <Route path = 'shots' component={Shots} />
        <Route path = 'home' component={Home} />
        <Route path = 'topper' component={Toppers} />
        <Route path = 'overlay' component={Overlay} />
        <Route path = 'earn' component={Earn} />

}

React-router错误直接通过路径访问或刷新页面

2 个答案: