Как я могу сделать маршрут по умолчанию в React?

Question

Я пытаюсь создать маршрут по умолчанию в моих маршрутах. js файл с использованием пакета реагирующий маршрутизатор-дом .

Это мой код:

import React from 'react';
import { Route, Switch, Router, Redirect, BrowserRouter } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import MainContainer from './containers/main';

const Routes = () => (
    <BrowserRouter>
        <Switch>
            <Route path='/' component={MainContainer} />
            <Redirect from='/' exact to='/main'/>
        </Switch>
    </BrowserRouter>
);

export default Routes;

Но он не перенаправляет / на /main. Обычно каждый раз, когда пользователь переходит на /, он должен перенаправлять на /main Кроме того, /main должна быть отправной точкой (домашней страницей) при создании приложения. Я использую шаблон приложения create-реакции-приложения CLI .

Спасибо.

Answer 1

Чтобы получить желаемый эффект, вы должны, прежде всего, переместить Redirect в верхнюю часть Switch .

Во-вторых, у вас есть изменить свойство "to" для вашего маршрута на /main. Поскольку это местоположение, для которого вы хотите загрузить компонент MainContainer .

Примерно так:

import React from 'react';
import { Route, Switch, Router, Redirect, BrowserRouter } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import MainContainer from './containers/main';

const Routes = () => (
    <BrowserRouter>
        <Switch>
            <Redirect exact from='/' to='/main'/>
            <Route path='/main' component={MainContainer} />
        </Switch>
    </BrowserRouter>
);

export default Routes;

В размещенном вами коде все местоположения go к компоненту Route , поскольку все они содержат /. Таким образом, переключатель никогда не нажмет Redirect .

В моем примере, Redirect будет срабатывать, когда местоположение будет точно /. Затем он перенаправит пользователя на /main, где Switch попадет на Route , который загружает ваш MainContainer компонент.