我正在创建一个使用webpack-dev-server开发的应用程序以及react-router.
似乎webpack-dev-server是基于这样的假设,即在一个地方(即"/")有一个公共入口点,而react-router允许无限量的入口点.
我想要webpack-dev-server的好处,特别是热量重新加载功能,这对于提高工作效率很有帮助,但我仍然希望能够加载在react-router中设置的路由.
如何实现它以便它们一起工作？你能以这种方式在webpack-dev-server前运行快速服务器吗？
我已经安装了react-router-domV6-beta。通过遵循网站上的示例，我可以使用新选项useRoutes设置页面路由并将其返回到App.js文件中。
保存后我收到以下错误：
错误：useRoutes() 只能在组件上下文中使用。
我想知道我是否在这里遗漏了一些东西？我已经在文件夹内创建了页面src/pages。
我的代码：
import { BrowserRouter, Link, Outlet, useRoutes } from 'react-router-dom';
// Pages
import Home from './pages/Home';
import About from './pages/About';
import Services from './pages/Services';
import Gallery from './pages/Gallery';
import Prices from './pages/Prices';
import Contact from './pages/Contact';
const App = () => {
const routes = useRoutes([
{ path: '/', element: <Home /> },
{ path: 'o-nama', element: <About /> },
{ path: 'usluge', element: <Services /> }, …我一直在想,我对客户端和服务器之间的路由感到困惑.假设我在将请求发送回Web浏览器之前使用ReactJS进行服务器端呈现,并使用react-router作为客户端路由在页面之间切换而不刷新为SPA.
我想到的是:
/home)到帖子页面(/posts)的请求我在客户端使用react和react-router作为我的应用程序.我似乎无法弄清楚如何从网址获取以下查询参数:
http://xmen.database/search#/?status=APPROVED&page=1&limit=20
我的路线看起来像这样(我知道路径是完全错误的):
var routes = (
<Route>
<DefaultRoute handler={SearchDisplay}/>
<Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
<Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);
我的路线工作正常,但我不知道如何格式化路径以获取我想要的参数.感谢任何帮助!
javascript client-side client-side-scripting reactjs react-router
/#/使用react-router时,有什么方法可以阻止在浏览器的地址栏中显示？这与ReactJS有关.即点击链接转到新路线显示localhost:3000/#/或
localhost:3000/#/about.视路线而定.
我试图实现经过身份验证的路由,但发现React Router 4现在阻止了它的工作:
<Route exact path="/" component={Index} />
<Route path="/auth" component={UnauthenticatedWrapper}>
<Route path="/auth/login" component={LoginBotBot} />
</Route>
<Route path="/domains" component={AuthenticatedWrapper}>
<Route exact path="/domains" component={DomainsIndex} />
</Route>
错误是:
警告:您不应该使用
<Route component>和使用<Route children>相同的路线;<Route children>将被忽略
在这种情况下,有什么正确的方法来实现这个？
它出现在react-router(v4)docs中,它表明了类似的东西
<Router>
<div>
<AuthButton/>
<ul>
<li><Link to="/public">Public Page</Link></li>
<li><Link to="/protected">Protected Page</Link></li>
</ul>
<Route path="/public" component={Public}/>
<Route path="/login" component={Login}/>
<PrivateRoute path="/protected" component={Protected}/>
</div>
</Router>
但是,将一堆路线组合在一起是否有可能实现这一目标？
UPDATE
好的,经过一些研究,我想出了这个:
import React, {PropTypes} from "react"
import {Route} from "react-router-dom"
export default class AuthenticatedRoute extends React.Component …是否可以获得当前匹配路由的路径模式？例子：
<Route
path=":state/:city*"
element={
<Page />
}
/>
<Route
path=":state/:city*"
element={
<Page />
}
/>
我知道我可以用来useMatch检查当前位置是否与特定路径模式匹配，但组件必须知道路径模式是什么。
我不明白使用IndexRoute和IndexLink的目的是什么.似乎在任何情况下,除非关闭路径被激活,否则下面的代码将首先选择Home组件.
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="about" component={About}/>
</Route>
VS
<Route path="/" component={App}>
<Route path="home" component={Home}/>
<Route path="about" component={About}/>
</Route>
第一种情况的优势/目的是什么？
我使用webpack和HtmlWebpackPlugin将捆绑的js和css注入到html模板文件中.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
它会生成以下html文件.
<!doctype html>
<html lang="en">
<head>
...
<link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="main-295c5189923694ec44ac.min.js"></script>
</body>
</html>
这在访问应用程序的根目录时工作正常localhost:3000/,但是当我尝试从另一个URL访问应用程序时失败,例如,localhost:3000/items/1因为捆绑的文件没有注入绝对路径.加载html文件时,它将在不存在的/items目录中查找js文件,因为react-router尚未加载.
如何让HtmlWebpackPlugin注入具有绝对路径的文件,所以express将在我的/dist目录的根目录中查找它们而不是在/dist/items/main-...min.js？或者也许我可以更改我的快速服务器来解决这个问题？
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
基本上,我只需要得到这条线:
<script src="main...js"></script>
在源的开头有一个斜杠.
<script src="/main...js></script>
两者都有Route,Link等.何时使用其中一种？我真的很困惑在哪里使用每一个.服务器端？客户端？
https://reacttraining.com/react-router/
在某些示例中,您需要传递历史记录,而不是其他情况.该怎么办？
<Router history={browserHistory}>
VS
<Router>
什么时候使用其中一个,任何帮助表示赞赏,这真的很令人困惑.
react-router ×10
reactjs ×9
javascript ×7
url-routing ×2
webpack ×2
client-side ×1
express ×1
routes ×1