Question

有些新的反应，并喜欢图书馆，但遇到各种令人头疼的路由器。

这是我目前的代码，问题如下：

// routes.js

var React = require('react');
var ReactDOM = require('react-dom');
import {Router, Route, IndexRoute, browserHistory} from 'react-router';

import App from './App';
import MainLayout from './components/MainLayout';
import Home from './components/home/Home';
import Product from './components/product/Product';
import Category from './components/category/Category';
import Cart from './components/cart/Cart';
import NotFound from './components/NotFound';

export default (
  <Router history={browserHistory}>
    <Route component={App} >
      <Route path='/' component={Home} />
      <Route path='/product/:productId' component={Product} />
      <Route path='/category/:catNumber' component={Category} />
      <Route path='/cart' component={Cart} />
    </Route>
    <Route path='*' component={NotFound} />
  </Router>
)

现在，我有三个主要问题，这让我觉得我可能只是误解了路由器的工作原理。

1）奇怪的网址哈希来自[http://localhost:3002/#/?_k=xv1opy]，即使它们不应该存在，因为我已经设置了历史记录= {browserHistory}

2）浏览器控制台警告：＆＃34;警告：位置＆＃34; /＆＃34;没有匹配任何路线＆＃34;和＆＃34;警告：你不能改变;它将被忽略。＆＃34;不确定这里发生了什么，因为我已经非常明确地定义了Home组件来渲染path =＆＃39; /＆＃39;。

3）可能相关，但每当我更改路线时，整个应用程序都会重新加载，清除所有商店数据。不理想，但我认为一旦修复＃1和（特别是）＃2就可以解决这个问题。

可能有用的更多信息：

// app.js render（）方法

render() {
return (
  <div>
    <Header />
    <Subheader />
    {this.props.children}
    <Footer />
  </div>
);

}

// index.js

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

import Routes from './routes';

if ( process.env.NODE_ENV !== 'production') {
  window.React = React;
}

ReactDOM.render(Routes, document.getElementById('main'));

任何对React更熟悉的人谁可以指出我在正确的方向？在过去的两天里，我已经把头发拉了出来，并且看起来似乎反应路由器的所有指南都无济于事。

Answer 1

您的路由有点缺陷。试试这个：

<Router history={browserHistory}>
  <Route path='/' component={App} >
    <IndexRoute component={Home} />
    <Route path='product/:productId' component={Product} />
    <Route path='category/:catNumber' component={Category} />
    <Route path='cart' component={Cart} />
  </Route>
  <Route path='*' component={NotFound} />
</Router>

这可以解决大部分（如果不是全部）错误。

Answer 2

可以轻松完成路由输入“ localhost：3000 /”，我们可以获取登录页面，如果仅通过创建登录页面和其他页面组件即可获取

        import React from 'react';
        import { Component } from "react";
        import { BrowserRouter, Switch, Route } from 'react-router-dom';
        import "bootstrap/dist/css/bootstrap.min.css";
        import login from './components/loginpage-component';
        import signup from './components/signup-component';
        render(){
        return (
         <BrowserRouter>
             <Switch>
                <Route exact path="/" component={login} /> 
                <Route exact path="/signup" component={signup} /> 
                <Route exact path="/live" component={live}/>
             </Switch>  
         </BrowserRouter>
         );
        }

        }
       export default App;

Answer 3

使用纱线或 npm
安装react-router-dom
yarn add react-router-dom
像这样导入react-router

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
像这样使用它

<Switch> <Route path="/scopes"> <Scopes /> </Route> <Route path={"/disciplines"}> <Disciplines /> </Route> <Route path={"/fields"}> <Fields /> </Route> <Route path={"/issues"}> <Issues /> </Route> <Route path={"/articles"}> <Articles /> </Route> <Route path={"/indexing"}> <Indexing /> </Route> <Route path={"/settings"}> <Settings /> </Route> </Switch>
现在您可以像这样创建到每个路由器的链接

<Link to="/articles">Articles</Link>

将链接导入为： import { Link } from 'react-router-dom'

Answer 4

如果您遵循这份文档https://reactrouter.com/web/guides/quick-start，它会说

步骤1： 移至项目文件夹并输入 npm install react-router-dom --save

步骤2： 导入路由文件

App.js

import React from 'react;
import {BrowserRouter as Router,Switch,Route} from "react-router-dom";

import Home from './components/home/Home';
import Product from './components/product/Product';
import Category from './components/category/Category';
import Cart from './components/cart/Cart';

const App = () => {
 return (
  <div>

   <Router>
    <Switch>

      <Route exact path="/">
        <Home />
      </Route>
      //by providing exact attribute will only match if the path matches the exact location else if we don't provide it will never render other components because it renders the first one that matches the current URL 
      <Route path="/product">
       <Product />
      </Route>
      <Route path="/category">
       <Category />
      </Route>
      <Route path="/cart">
       <Cart />
      </Route>
    </Switch>
   </Router>

 </div>
)
}
export default App;

如何正确使用react-router

4 个答案: