根据 reactjs 中的 url，文件的段落未显示

Question

我对 ReactJS 中的路由有疑问。我想显示如下所示的 AddUser 文件：

const AddUser = () => {
    return(
        <p>Hello from Add User</p>
    )
}
export default AddUser;

但是当我按 http://localhost:3000/add 时，'Hello from Add User' 没有显示。

问题是什么？

文件看起来像这样

Answer 1

这是反应路由 dom 实现的简单示例，url 更改后它将呈现在屏幕上，导入这个，

import { HashRouter, BrowserRouter, Route, Switch } from 'react-router-dom';

<BrowserRouter>
  <Switch>
      <Route path="/" exact component= { (props) => ( <div>Home</div> )} />
      <Route path="/add" component={(props) => ( <AddUser  /> )} />     
  </Switch>
</BrowserRouter>

那么你需要一个按钮，

<button className="btn">
    <a href="/add">Add</a>
</button>

在你的情况下，

const AddUser = () => {
    return(
        <p>Hello from Add User</p>
    )
}

根据 reactjs 中的 url，文件的段落未显示

the paragraph of a file is not showing according to url in reactjs

routes

reactjs