如何在 React 中创建默认路由？

Question

I am trying to make default route in my routes.js file using react-router-dom package.

This is my code:

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;

But it doesn't redirect / to /main . Basically, whenever user goes to / it should redirect to /main . Also, the /main should be starting point (homepage) when I build my app. I am using create-react-app boilerplate CLI .

Thanks.

Answer 1

To get the effect that you want, you should, first of all, move the Redirect to the top of the Switch .

Second, you have to change the "to" property for your Route to /main . Since that is the location that you want to load your MainContainer component for.

Like so:

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;

In the code you posted, all locations go to the Route component because they all contain / . So the switch will never hit the Redirect .

In my example, the Redirect will get hit when the location is exactly / . It will then redirect the user to /main , where the Switch will hit the Route which loads your MainContainer component.