React.js как зарегистрировать несколько маршрутов в файле маршрутов

Question

Я очень плохо знаком с React.js.

Я пытаюсь создать очень простое приложение с маршрутизатором React.

Когда кто-то нажимает кнопку входа в систему, он должен направиться к компоненту Inside.js

import React, { Component } from "react";
import styles from "./welcome.css";
import {Router,browserHistory } from 'react-router';
class Welcome extends Component {

  onClick(){
    // alert("Hello World!")
    browserHistory.push('/Inside')
  }

  render() {
    return (
      <div id="main">
        <div id="welcome">
        <div>
        <input type="text" />
        </div>
        <div>
        <input type="password" />
        </div>
        <div>
        <input type="checkbox" />Remember me
        </div>
        <div>
        <button type="button" onClick={this.onClick}>Login</button>
        </div>
          
          
        </div>
      </div>
    );
  }
}

export default Welcome;

Сейчас я не хочу использовать Redux и Middle -ware для обработки аутентификации.Мне просто нужно направить его к Inside.js компоненту.

Это мой Routes.js , здесь я определяю мой /Inside путь к маршрутизатору.

import React from 'react';
import {Route,IndexRoute} from 'react-router';

import App from './components/App/App';
import Welcome from './components/Welcome/welcome';
import Inside from './components/Inside/inside';


export default(
    <Route path={'/'} component={App}>
        <IndexRoute component={Welcome}/>
    </Route>
    // <Route path={'/Inside'} component={Inside}>
    // </Route>
)

Answer 1

Для маршрутизации в приложениях React JS я предпочитаю использовать react-router-dom, его удобный, простой в использовании, и вы можете использовать те же концепции для маршрутизации и в собственных приложениях React.

Узловой модуль: https://www.npmjs.com/package/react-router-dom

Руководство по началу работы: https://reacttraining.com/react-router/web/example/basic

Надеюсь, это поможет, ура :)

Answer 2

Вы можете комбинировать маршруты как

<Route>
    <Route component={App}>
        <Route path='/' component={Welcome} />
        <Route path='Inside' component={Inside} />
    </Route>
  </Route>