通过在 react-router 的地址栏上输入它的地址直接访问路由器

Posted 2023-02-27

【中文标题】通过在 react-router 的地址栏上输入它的地址直接访问路由器

【英文标题】：Access to router directly by typing it's address on the address bar in react-router

【发布时间】：2017-08-17 13:12:47

【问题描述】：

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

我如何配置 HashRouter 使其在没有 # 的情况下工作或配置 BrowserRouter 以直接使用 URL 输入？ .htaccess 可以吗？怎么样？

---

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'));

[在这种类型中，它与 # 标记一起使用。例如：localhost:2000/#/projects]

---

另一种类型：

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'));

[并且在这种类型中它没有#标记也可以很好地工作，但是无法直接在浏览器的地址栏上加载它。]

【问题讨论】：

你可以通过输入url来显示路线

这正是我想做的，但它在 BrowserRouter 中不起作用:(

给我看看你的配置，看看我能帮上什么忙

谢谢亲爱的 Rei，所以请检查下面的代码。

你确定第二个例子吗？或者您只是将此响应发送到 '/' ？第二个示例可以正常工作，您需要做的就是设置服务器，以便它在每条路径上发送正确的响应。

【参考方案1】：

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

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