React路由不工作| React路由器使用React- Router语言 - dom

Question

**app.jsx is the main file handling all routes.** 
<Switch>
<Route exact path="/" component={Home} /> 
<Route path="/entry-rules" component={EntryRules} />
<Route path="/entry-form" component={EntryForm} />
<Route path="/payment" component={Payment} />
<Route component={Error404} />
</Switch>
```        
**Home route is working fine when I click others component is not working.**
**I have used react-router-dom version 5.2.0**
```        
<li className="nav-item">
<Link to="/" className="nav-link active" aria-current="page">
Home
</Link>
</li>
<li className="nav-item">
<Link to="/entry-rules" className="nav-link">
Entry Rules
</Link>
</li>
<li className="nav-item">
<Link to="/entry-form" className="nav-link">
Entry Form
</Link>
</li>
```

Home route is working fine when I click others component is not working.应用程序。jsx是处理所有路由的主要文件。我使用的是react-router-dom版本5.2.0

Answer 1

欢迎来到SO!我看到你在Home路线上使用的是exact，而不是其他路线。React Router Dom需要被告知路径是精确的，所以你应该这样做:

<Switch>
<Route exact path="/" component={Home} /> 
<Route path="/entry-rules" exact  component={EntryRules} />
<Route path="/entry-rorm" exact  component={EntryForm} />
<Route path="/payment" exact  component={Payment} />
<Route component={Error404} path="*" />
</Switch>

注意有'*'而没有确切的道具。因为如果RRD不能从上面找到任何东西，我们想要Error404组件。

再次欢迎来到SO，尽量组织好你的问题，并为有帮助的答案投票。

Answer 2

其中一个Route有错别字。path应为"/entry-form"

<Route path="/entry-rorm" component={EntryForm} />
<Link to="/entry-form" className="nav-link">

其他路线应该是使用您的代码。如果没有，请尝试将主页路由移动到<Switch>组件中的所有路由下面