ReactJS Router Not Routing

Question

Работа над созданием React-Router для работы в SPA, но я не могу заставить его отображать ничего, кроме компонента приложения.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router'; 
import Parameter from './components/parameter/Parameter'; 

class App extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div className="container"> 
       <h1>TEST</h1> 
       <Link to="/parameter">Click Me!</Link> 
      </div> 
     ) 
    } 
} 

class Test extends React.Component { 
    render() { 
     return (
      <div className="container"> 
       <h1>TEST PAGE</h1> 
      </div> 
     ) 
    } 
} 

var routes = (
    <Route name="root" component={App} path="/"> 
     <Route component={Test} path="test" /> 
     <Route component={Parameter} path="parameter" /> 
    </Route> 
) 

ReactDOM.render((
    <Router history={browserHistory} routes={routes} /> 
), document.getElementById('react')) 

Answer 1

Вы не указываете, где вы хотите, чтобы вложенные компоненты для визуализации в App компонента. Компонент App ведет себя как макет для всех вложенных маршрутов.

Компоненты, которые вы указываете для вложенных маршрутов, должны иметь место для размещения в макете/родительском компоненте при ударе определенного маршрута.

Простейший способ получить эту работу - использовать {this.props.children} где-то в вашем компоненте App. Обратитесь к моему примеру ниже.

Вот ваш компонент App снова:

class App extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div className="container"> 
       <h1>TEST</h1> 
       <Link to="/parameter">Click Me!</Link> 
       {this.props.children} 
      </div> 
     ) 
    } 
} 

Для более, например, в глубине, относятся к active-links например, из-среагировать маршрутизатор репо. В их примере вы можете увидеть, что children доступен в качестве реквизита в компоненте App и будет отображать любой из других компонентов из вложенных маршрутов при попадании соответствующего маршрута. Например, попадание на маршрут / отобразит компонент Index в пределах App, где расположен {children}, потому что существует прямой вложенный маршрут <IndexRoute ... />, который существует.

React обеспечивает this.props.children как способ доступа к дочерним компонентам компонента. Он позволяет передавать компоненты как данные другому компоненту. В этом случае рендеринг дочернего компонента в компоненте App.

Answer 2

Если вы используете Реагировать v4 Router, я думаю, что причина, по которой вложенные компоненты не делает, потому что вы не можете вкладывать <Route /> s в React v4 Router.

Я открыл вопрос об этом раньше:

How to nest routes in React Router v4?