通过在 react-router 的地址栏上输入它的地址直接访问路由器 [英] Access to router directly by typing it's address on the address bar in react-router

问题描述

有两个主要"使用 react-router (V4) 的方法；第一种方法是使用哈希路由器，您可以通过在浏览器的地址栏上输入地址来直接访问该地址，但您必须在 URL 中添加 #，另一种方法是使用具有漂亮且用户友好的 URL 结构的 BrowserRouter，但您可以t 直接输入地址来渲染路由.

如何将 HashRouter 配置为在没有 # 的情况下工作，或者如何将 BrowserRouter 配置为直接使用 URL 输入?.htaccess 有可能吗?怎么样?

---

const React = require('react');const ReactDOM = require('react-dom');从react-router-dom"导入 { HashRouter 作为路由器、路由、链接}；const 路由 = (<Router forceRefresh={false}><div><路由精确路径=/";组件={首页}/><路由精确路径="/projects";组件={项目列表}/>

</路由器>);ReactDOM.render(routes, document.getElementById('app'));

[在这种类型中，它使用 # 标记.例如: localhost:2000/#/projects ]

---

另一种:

const React = require('react');const ReactDOM = require('react-dom');从react-router-dom"导入 { BrowserRouter 作为路由器、路由、链接}；const 路由 = (<Router forceRefresh={true}><div><路由精确路径=/";组件={首页}/><路由精确路径="/projects";组件={项目列表}/>

</路由器>);ReactDOM.render(routes, document.getElementById('app'));

[在这种类型中，它在没有 # 标记的情况下运行良好，但无法直接在浏览器的地址栏上加载.]

解决方案

如果你使用 webpack-dev-server，你需要在你的配置文件中设置 historyApiFallback: true.

https://webpack.js.org/configuration/dev-服务器/#devserver-historyapifallback

There is two "main" way to use react-router (V4); The first way is using hash router which you can access directly to an address by typing it on browser's address bar but you must add a # to URL, another way is using BrowserRouter which has a pretty and user-friendly URL structure but you can't directly type the address to render the route.

How I can config HashRouter to work without # or config BrowserRouter to work with directly URL typing, too? Is it possible with .htaccess? How?

---

const React = require('react');
const ReactDOM = require('react-dom');
import { HashRouter as Router, Route, Link} from 'react-router-dom';
    
const routes = (
    <Router forceRefresh={false}>
        <div>
            <Route exact path="/" component={Firstpage}/>
            <Route exact path="/projects" component={Projectslist}/>
        </div>
    </Router>
);

ReactDOM.render(routes, document.getElementById('app'));

[In this type it works with a # mark. e.g.: localhost:2000/#/projects ]

---

Another type:

const React = require('react');
const ReactDOM = require('react-dom');
import { BrowserRouter as Router, Route, Link} from 'react-router-dom';
    
const routes = (
    <Router forceRefresh={true}>
        <div>
            <Route exact path="/" component={Firstpage}/>
            <Route exact path="/projects" component={Projectslist}/>
        </div>
    </Router>
);
    
ReactDOM.render(routes, document.getElementById('app'));

[And in this type it works well without a # mark, but it's not possible to load it directly on the browser's address bar.]

解决方案

If you are using webpack-dev-server, you need to set historyApiFallback: true in your config file.

https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback

这篇关于通过在 react-router 的地址栏上输入它的地址直接访问路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！