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

IT技术 javascript .htaccess reactjs react-router react-router-dom
2021-05-05 18:26:03

使用 react-router (V4) 有两种“主要”方式;第一种方法是使用哈希路由器,您可以通过在浏览器的地址栏上输入地址来直接访问该地址,但您必须在 URL 中添加一个 #,另一种方法是使用具有漂亮且用户友好的 URL 结构的 BrowserRouter,但您可以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'));

[在这种类型中,它使用 # 标记。例如:本地主机: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'));

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

1个回答

如果您使用 webpack-dev-server,则需要historyApiFallback: true在配置文件中进行设置

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