反应路由器没有正确路由答案

【问题标题】：React Router not routing correctly反应路由器没有正确路由
【发布时间】：2020-07-29 06:21:02
【问题描述】：

我有以下几点：

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Header from './layout/Header';
import Home from '../pages/Home';
import AboutUs from '../pages/Aboutus'
import { Layout } from 'antd';

class Main extends Component {

    render() {
        return (
        <Layout className="layout">
            <Header />
            <Switch>
                <Route path='/' component={Home} />
                <Route path='/about' component={AboutUs} />
                <Redirect to='/' />
            </Switch>
        </Layout>)
    };
}

export default Main;

当访问 / 然后主页正确加载。访问不存在的路线时，会再次加载 Home，但访问 /about 时会加载 Home 而不是 AboutUs。

奇怪的是，如果我在访问 / 而不是加载 Home 时移动 AboutUs 组件来加载，那么 AboutUs 运行良好

【问题讨论】：

那是因为 exact 属性。 <Route path='/' component={Home} exact /> 应该适合你

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

您需要使用 exact 属性，因为“/”匹配任何以“/”开头的路由，基本上就是所有内容。 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#exact-bool

【讨论】：