Question

我正在使用react + react-router构建 React App ，但我对重定向有疑问。

我有下一个文件夹结构：

... /public /index.html (react index) /tos/ /terms.html /privacy.html ... /src index.js App.js ...

index.js：

class App extends Component {

    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/settings" component={Settings}/>
                </Switch>
            </Router>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'));
registerServiceWorker();

问题是当我想要重定向到/public/tos/terms.html或/public/tos/privacy.html时，有时（更常见的是镀铬），我不能。项目再次呈现索引，并显示空白页面，因为路由交换机中未声明路由/public/tos/terms.html或/public/tos/privacy.html。

另一方面，我在同一个base_url中有其他“无反应”项目，但是在其他端口www.my-project.com:4040/other中监听，我已在下一个路由中配置它：www.my-project.com/other。但在这种情况下，我遇到了同样的问题，当我从我的React-app重定向到这条路线时，反应没有重定向并再次渲染App.js而没有内部组件。

有人可以告诉我在同一个项目中重定向到其他地方但没有做出反应吗？

Answer 1

如果您尝试访问有效网址/public/tos/terms.html，则必须使用组件来处理网址：

<Route  path="/public/tos/terms" component={/*Component to render*\ }/>

所以它会像：

        <Router>
          <div>
            <Switch>
                <Route path="/settings" component={Settings}/>
                <Route  path="/public/tos/terms" component={/*Component to render*\ }/>
                <Route exact path="/" component={Home}/>
            </Switch>
          </div>
        </Router>

如果您正在寻找如何将您的外部文件作为组件包含在您的reactjs中，那么其中一种方法是，使用axios发送获取请求，然后您可以将其用作dangerouslySetInnerHTML，

function getExternalFile(fileName) {
   const request = axios.get('/myAPI/getExternalFile/' + fileName).then(
    respone =>
     {this.setState({externalFile: response})}); }

function MyComponent() {
  return <div dangerouslySetInnerHTML={getHTMLFile()} />;
}

Answer 2

我认为您的问题与ReactRouter无关...... RR适用于Google Chrome以及其他浏览器。看看你的app中是否有registerServiceWorker，因为这可能只是Chrome中的重定向错误。如果你有它并且不使用其他东西就删除它。

希望这会对你有所帮助。

Answer 3

“重定向”在您的应用环境中意味着什么？

如果您只想简单地从页脚链接到那些静态页面，请使用简单的HTML锚点/链接标记而不是React Router Link组件。

例如：

const Footer = () => 
 <div>
   <a href='/tos/terms.html'>Terms and Conditions</a>
   <Link to='/login'>Sign in</Link>
 </div>

第一个链接将由浏览器处理，应该可以正常工作。第二个将由React Router处理，并且应该匹配路由配置中的Route。

如果你想真的redirect，就像在用户访问网址中一样，但我希望它最终登陆网址B，然后显示更多代码。 ;）

React Router不加载外部html文件

3 个答案: