Javascript 我应该如何在react中构建路由以使其工作？

我从React开始，创建一个简单的用户页面，我想在它和主页之间导航

| index.js
| components
|     App.js
|     Users.js
|     Home.js
|     Header.js

这就是我定义的结构：

Header.js：

<header>
   <BrowserRouter>
      <Link to="/users">Users</Link>
    </BrowserRouter>
</header>

---

按如下方式更改代码

                <BrowserRouter>
                    <Switch>
                        <Route path="/" exact component={Home}/>
                        <Route path="/usuarios" exact component={Users}/>
                    </Switch>
                </BrowserRouter>
           


import {Link} from "react-router-dom";
import Users from './Users';
class Header extends Component {
    render() {
        return (
            <header>
                 <div className="links">
                    <nav>
                        <ul>
                            <li><Link to="/usuarios">Users</Link></li>
                        </ul>
                    </nav>
                </div>
            </header>
)
}}

从“react router dom”导入{Link}；
从“./Users”导入用户；
类头扩展组件{
render（）{
返回(

使用者

)
}}

---

尝试在index.js文件中移动BrowserRouter

  ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
  );

ReactDOM.render(
,
document.getElementById（“根”）
);

我刚刚测试了这个，我必须添加

{BrowserRouter}

，但是如果我输入

http:localhost:3000/users

它就工作了，但是通过点击

它就不工作了work@ThiiagoL您需要将

标题

移动到

浏览器路由器

内部，因为您只能在路由器内部使用

链接

。

<header>

      <Link to="/users">Users</Link>
</header>

                <BrowserRouter>
                    <Switch>
                        <Route path="/" exact component={Home}/>
                        <Route path="/usuarios" exact component={Users}/>
                    </Switch>
                </BrowserRouter>
           


import {Link} from "react-router-dom";
import Users from './Users';
class Header extends Component {
    render() {
        return (
            <header>
                 <div className="links">
                    <nav>
                        <ul>
                            <li><Link to="/usuarios">Users</Link></li>
                        </ul>
                    </nav>
                </div>
            </header>
)
}}

  ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
  );