Реагировать маршрутизатор всегда отображающее IndexRoute

Question

Это мое главное приложение файл:

import React from 'react'; 
import { render } from 'react-dom'; 
import { browserHistory, Router, Route, IndexRoute } from 'react-router'; 

// Components 
import Main from './components/core/Main.component'; 
import NotFound from './components/core/NotFound.component'; 
import About from './components/About.component'; 
import TeaTimer from './components/TeaTimer.component'; 

// App css 
require('style!css!sass!applicationStyles'); 

render(
    (<div> 
     <Router history={browserHistory}> 
     <Route component={Main} path="/"> 
      <IndexRoute component={TeaTimer} /> 
      <Route component={About} path="/about"/> 
     </Route> 
     <Route component={NotFound} path="*"/> 
     </Router> 
    </div>), 
    document.querySelector('#app') 
); 

Это мой Основной компонент:

import React, { Component } from 'react'; 

class Main extends Component { 
    render() { 
    return (
     <div> 
      {this.props.children} 
     </div> 
    ) 
    } 
} 

Main.propTypes = { 
    children: React.PropTypes.object 
} 

export default Main; 

Это мой экспресс-установки сервера:

var express = require('express'); 

// Create our app 
var app = express(); 
const PORT = process.env.PORT || 3000; 

app.use(function (req, res, next){ 
    if (req.headers['x-forwarded-proto'] === 'https') { 
    res.redirect('http://' + req.hostname + req.url); 
    } else { 
    next(); 
    } 
}); 

app.use(express.static('public')); 

app.listen(PORT, function() { 
    console.log('Express server is up on port ' + PORT); 
}); 

сейчас когда я открываю браузер и перехожу на http://localhost:3000 Я получаю компонент TeaTimer. То же самое для http://localhost:3000/#/, то же для http://localhost:3000/#/about, то же для неопределенного маршрута - http://localhost:3000/#/sdnaipwnda[j.

Но когда я иду в http://localhost:3000/about я получаю:

не может получить/о

Что я делаю неправильно?

Если вам нужна дополнительная информация, пожалуйста, задайте вопрос, и я добавлю его на вопрос, или ознакомьтесь с этим git repo.

Answer 1

ОК, этот простой. Вы просто используете неправильную историю. Вам нужно hashHistory, если вы хотите иметь hash-based, т. Е. /#/about и т. Д., Маршруты.

import {Router, hashHistory} from 'react-router' ... <Router history={hashHistory}> ...

Если вы НЕ хотите, хэш на основе истории, но предпочел бы, как регулярный вид URL, как /about и такие, то вам нужно browserHistory. Однако в этом случае вы ДОЛЖНЫ убедиться, что ваш веб-сервер обслуживает то же самое index.html для всех маршрутных URL. Это объясняется в react-router 'documentation. Вам нужно добавить что-то вроде этого к концу конфигурации маршрутизации свой экспресс-сервера:

// handle every other route with index.html, which will contain // a script tag to your application's JavaScript file(s). app.get('*', function (request, response){ response.sendFile(path.resolve(__dirname, 'public', 'index.html')) }) Приведенный выше код предполагает, что файл index.html находится в public/, так что вам, возможно, придется изменить аргументы path.resolve.

Я действительно предпочитаю возвращать index.html только для URL-адресов, у которых нет расширения. Таким образом, вы запретите использование index.html как .png или.js, когда запрашиваемый ресурс отсутствует, и вместо этого вы получаете значение 404.

app.get('*', function (request, response){ if (request.path.match(/\/[^\/.]*$/)) { response.sendFile(path.resolve(__dirname, 'public', 'index.html')) } })

Answer 2

удалить / из пути

<Route component={About} path="about"/> 

удалите

Main.propTypes = { 
    children: React.PropTypes.object 
} 

в любом случае дети передаются в качестве реквизита по умолчанию

Answer 3

нет необходимости иметь/внутри о пути.

визуализации ( ( ), document.querySelector ('# приложение') );