javascript - 如何使用 React Router Dom 在 ReactJS 上正确路由页面
问题描述
我尝试路由我的页面..但是当我从页面复制一些 URL 链接并想显示给其他人..他们看到 404 Page's not found..
我使用这个简单的 React 代码:
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
我有更多页面..但是当我复制/粘贴没有某些页面的 URL 地址时会显示。我该如何解决?
解决方案
这取决于使用的路由器版本。版本 4 的示例。我创建了 codepen https://codepen.io/romanown/pen/ZEQjrXm并且它的工作。当我转到菜单标签时,改为使用 codepen。但是通过网址在codepen上不起作用。因为它需要真正的本地或网络服务器或托管。那些把减号至少写成什么的人。
html
<div id="app"></div>
js
const {
BrowserRouter,
Switch,
Route,
Link
} = ReactRouterDOM
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
const App = () => (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</BrowserRouter>
)
ReactDOM.render((
<App />
), document.getElementById('root'))
推荐阅读
- javascript - 为什么不替换第二个数组 last13 中的所有字母?
- javascript - 在实用函数 Redux JS 中更新值后立即调度异步操作和 getState
- encryption - 在 HA 代理中使用 aes_gcm_dec 解密 HTTP 标头
- ios - 通过的标签不出现
- python - 如何使用 python 使点击事件通过窗口?
- elasticsearch - 同一查询中不同搜索的 Elasticsearch 聚合
- wordpress - Wordpress Lightbox 仅显示第一张图片
- elasticsearch - 为什么需要 elasticsearch 中的摄取插件?
- c# - 从企业代理后面使用 .Net Core 3.00 对 Azure AD 进行身份验证
- javascript - 未捕获的 ReferenceError:getSelectedOption 未在 HTMLButtonElement.document.getElementById.onclick 中定义