javascript - How to correctly use react-router - Stack Overflow

admin管理员组

文章数量:1287507

Somewhat new to react, and liking the library, but running into all kinds of headaches with the router.

Here is my current code, question is below:

// 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 './ponents/MainLayout';
import Home from './ponents/home/Home';
import Product from './ponents/product/Product';
import Category from './ponents/category/Category';
import Cart from './ponents/cart/Cart';
import NotFound from './ponents/NotFound';

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

Now, I have three major problems, which makes me think that maybe I'm just terribly misunderstanding how the router works.

1) Strange url hashes from react [http://localhost:3002/#/?_k=xv1opy], even though they shouldn't be there, as I've already set history={browserHistory}

2) Browser console warnings: "Warning: Location "/" did not match any routes" and "Warning: You cannot change ; it will be ignored." Not sure what's happening here, as I've very clearly defined the Home ponent to render for path='/'.

3) Probably related, but any time I change routes, the entire application reloads, clearing all my store data. Not ideal, but I think this can be fixed once I fix #1 and (especially) #2.

More information that might be useful:

// app.js render() method

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

Anyone a bit more familiar with React who can point me in the right direction here? Been pulling my hair out for the past two days on this, and have read seemingly every guide on react-router to no avail.

Somewhat new to react, and liking the library, but running into all kinds of headaches with the router.

Here is my current code, question is below:

// 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 './ponents/MainLayout';
import Home from './ponents/home/Home';
import Product from './ponents/product/Product';
import Category from './ponents/category/Category';
import Cart from './ponents/cart/Cart';
import NotFound from './ponents/NotFound';

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

Now, I have three major problems, which makes me think that maybe I'm just terribly misunderstanding how the router works.

1) Strange url hashes from react [http://localhost:3002/#/?_k=xv1opy], even though they shouldn't be there, as I've already set history={browserHistory}

2) Browser console warnings: "Warning: Location "/" did not match any routes" and "Warning: You cannot change ; it will be ignored." Not sure what's happening here, as I've very clearly defined the Home ponent to render for path='/'.

3) Probably related, but any time I change routes, the entire application reloads, clearing all my store data. Not ideal, but I think this can be fixed once I fix #1 and (especially) #2.

More information that might be useful:

// app.js render() method

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

Anyone a bit more familiar with React who can point me in the right direction here? Been pulling my hair out for the past two days on this, and have read seemingly every guide on react-router to no avail.

• javascript
• reactjs
• react-router

Share Improve this question Follow asked May 30, 2016 at 8:56 jmknolljmknoll 1,05455 gold badges1111 silver badges3131 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

Your routing is a bit flawed. Try this instead:

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

This should solve most, if not all, of your errors.

my router like this

    {
        element: <Layout/>,
        children: [
            {
                path: "/",
                element: <Product/>
            },
            {
                path: "/dashboard",
                element: <Dashboard/>
            },
            {
                path: "/category",
                element: <Category/>
            },
            {
                path: "/register",
                element: <RegisterForm/>
            },
            {
                path: "/addProduct",
                element: <AddProductForm/>
            },
            {
                path: "/addCategory",
                element: <AddCategoryForm/>
            },
            {
                path: "/editProduct/:id",
                element: <EditProductForm/>
            }
        ]
    }

])```

1. If you want to create the React Element, use element:

   <Route path="/about" element={<About/>} />

2. Otherwise use Component and React Router will create the React Element for you:

   <Route path="/about" Component={About} />

App.js

import React from 'react';
import {BrowserRouter as Router, Route, Routes } from 'react-router-dom';
    
import Home from './ponents/Home';
import Create from './ponents/Create';
import Read from './ponents/Read';
import Update from './ponents/Update';

export default function App() {
  return (
     <Router>
         <Routes>
            <Route path='/' Component={Home} />
            <Route path='/create' Component={Create} />
            <Route path='/read' Component={Read} />
            <Route path='/update' Component={Update} />
         </Routes>
     </Router>
  )
}

The Routing can be done easily type "localhost:3000/" type we can get the login page and if only get by creating a login page and other pages ponent

        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 './ponents/loginpage-ponent';
        import signup from './ponents/signup-ponent';
        render(){
        return (
         <BrowserRouter>
             <Switch>
                <Route exact path="/" ponent={login} /> 
                <Route exact path="/signup" ponent={signup} /> 
                <Route exact path="/live" ponent={live}/>
             </Switch>  
         </BrowserRouter>
         );
        }

        }
       export default App;

If you follow this docs https://reactrouter./web/guides/quick-start, It says

Step 1: Move to the project folder and type npm install react-router-dom --save

Step 2: import the route files

App.js

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

import Home from './ponents/home/Home';
import Product from './ponents/product/Product';
import Category from './ponents/category/Category';
import Cart from './ponents/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 ponents 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;

1. install react-router-dom using yarn or npm

   yarn add react-router-dom

2. import react-router like this

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

3. Use it like this

    <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>
   

4. now you can create a link to each router like this

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

import Link as: import { Link } from 'react-router-dom'

本文标签： javascriptHow to correctly use reactrouterStack Overflow