Question

我有一个在Entery以下的React App：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Start from './Portal/Membership/Anonymous/Start';
import Register from './Portal/Membership/Anonymous/Register';
import NoMatch from './Portal/Membership/Anonymous/NoMatch';


const App = () => (
    <div className="App" style={{ height: "100vh" }}>
        <Router>
            <div>
                <Switch>
                    <Route exact path="/" component={Start} />
                    <Route exact path="/Register" Component={Register} />
                    <Route component={NoMatch} />
                </Switch>
            </div>
        </Router>
    </div>
);

export default App;

只有路径/有效，但是如果我打开/Start页面，则即使NoMatch也不会呈现空白。如果我导航到错误的URL，将显示NoMatch。

如果我将默认组件更改为Register，则Register组件将在/位置呈现

Answer 1

我在网上搜索了所有内容，并阅读了所有React Router文档，直到无意间复制并粘贴了一行路由器并发现Component和component之间存在差异，我什么都没找到！ / p>

我想知道为什么当Component，c和{{1}都没有时，react不能识别component属性（使用大写render）并且没有引发异常}定义！

请记住，如果您编写类似children的内容，React会通过消息<SomeComponent someBooleanAttribute="true" />来警告您，但是对于这个更重要的问题，不会向开发人员显示任何警告或错误！

Answer 2

错误：

您目前仅定义了路由/和/Register。

修复：

您需要声明一条路线，/Start：

<Route path="/Start" component={Start} />

示例：

<Switch>
  <Route exact path="/" component={Start} />
  <Route path="/Start" component={Start} />
  <Route path="/Register" component={Register} />
  <Route component={NoMatch} />
</Switch>

React Router是正确的，但不能按预期工作

2 个答案:

错误：

修复：

示例：